【three.js webGL】2次元カラーマップの作り方
今日はthree.jsで2次元平面上の各点に任意の色を指定することで、意味のある2次元配色を与えることで何かしらの量を可視化する2次元カラーマップの作り方を解説するよ。今回は下図のようなN✕Nの格子を個の小さな正方形を配置してポリゴンを生成し、(N+1)✕(N+1)個の格子点にそれぞれ任意の色を設定するよ。
下のアニメーションは各点$$(x,y)$$の値を次の式で設定して、1を赤、-1を青となるように各点の描画色を指定した結果だよ。
$$
F(x,y,t) = \sin(