2020年07月20日

立方体にシェーダを設定

Three.jsでシェーダ(GLSL)入門」でシェーダを使用する方法を調べましたが、Three.jsのサンプルを参考に、立方体にシェーダを設定してみました。※Three.jsはr118を使用しています。

立方体にシェーダを設定

● 立方体を生成

BoxBufferGeometryを使用して立方体を生成します。シェーダプログラム内で頂点データを操作する必要がなければ、BoxGeometryでも大丈夫です。

また、動作確認のため、ライティングを必要としないMeshNormalMaterialを設定しました。

const geometry = new THREE.BoxBufferGeometry(4,4,4);
const material = new THREE.MeshNormalMaterial();
const box = new THREE.Mesh(geometry,material);
scene.add(box);

● RawShaderMaterial

MeshNormalMaterialをRawShaderMaterialに変更して、シェーダを設定します。RawShaderMaterialについては「RawShaderMaterial」を参考にしてください。

//バーテックスシェーダ
const vertexShader =`

	//精度の指定
	precision mediump float;

	//modelViewMatrixの宣言
	uniform mat4 modelViewMatrix;

	//projectionMatrixの宣言
	uniform mat4 projectionMatrix;

	//positionの宣言
	attribute vec3 position;

	//uvの宣言
	attribute vec2 uv;

	varying vec2 vUv;

	void main(){
		gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);

		//フラグメントシェーダにuvを転送
		vUv = uv;
	}
`;

//フラグメントシェーダ
const fragmentShader =`

	//精度の指定
	precision mediump float;

	//timeを取得
	uniform float time;

	//vUvを取得
	varying vec2 vUv;

	void main(){

		//uv座標系で、オブジェクトの中心に原点を設定
		vec2 fuv = -1.0 + 2.0 * vUv;

		//uv座標系を使用して描画色を設定
		float r = abs(sin(fuv.s * fuv.t + time / 5.0));
		float g = abs(sin(fuv.s * fuv.t + time / 4.0));
		float b = abs(sin(fuv.s * fuv.t + time / 3.0));

		gl_FragColor = vec4(r,g,b,1.0);
	}
`;

const geometry = new THREE.BoxBufferGeometry(4,4,4);

//timeを設定
const uniforms = {
	time:{type:'f',value:1.0}
};

//RawShaderMaterial
const material = new THREE.RawShaderMaterial({
	uniforms:uniforms,
	vertexShader:vertexShader,
	fragmentShader:fragmentShader,
});

const box = new THREE.Mesh(geometry,material);
scene.add(box);

let step = 0;

function rendering(){
	requestAnimationFrame(rendering);

	step++;

	//timeを更新
	box.material.uniforms.time.value = step / 60.0 * 5;

	renderer.render(scene,camera);
}

完成したデモになります。Three.jsのサンプルのようにシェーダを変えてみると面白そうです!Three.jsのシェーダのデモなのでパソコンとスマホで見ることができるようにしました。

  • このエントリーをはてなブックマークに追加

関連記事

前の記事へ

RawShaderMaterial

次の記事へ

Three.jsで星空を制作