X
2021年04月29日 - WebVR・Three.js

PlaneGeometryをシェーダで波形アニメーション

PlaneGeometryをシェーダで波形アニメーション

RawShaderMaterialにライトを設定」に続き「Create a Wave Motion Effect on an Image with Three.js」を参考に、PlaneGeometryをシェーダで波形アニメーションさせてみました。※Three.jsはr128を使用しています。

RawShaderMaterialにテクスチャを設定

波形アニメーションの前に、RawShaderMaterialにテクスチャを設定します。

RawShaderMaterialの場合、テクスチャはuniformsでシェーダに送りますが、THREE.UniformsUtils.mergeを使用する場合、後からテクスチャを設定し直す必要があります。

RawShaderMaterialにテクスチャを設定
//テクスチャ画像の読み込み
const texture = new THREE.TextureLoader().load('./img/pict.jpg');

const uniforms = {
	time:{type:'f',value:0.0},
	diffuse:{type:'c',value:new THREE.Color(0xFFFFFF)},
	emissive:{type:'c',value:new THREE.Color(0x000000)},

	//テクスチャ
	texture:{type:'t',value:null}
};

//PlaneGeometryのサイズを調整
const geometry = new THREE.PlaneGeometry(2,2,128,128);
const material = new THREE.RawShaderMaterial({
	vertexShader:vertexShader,
	fragmentShader:fragmentShader,
	uniforms:THREE.UniformsUtils.merge([
	   		THREE.UniformsLib.lights,
	   		uniforms
	]),
	lights:true,
	side:THREE.DoubleSide,
});

//テクスチャを設定
material.uniforms.texture.value = texture;
plane = new THREE.Mesh(geometry,material);
scene.add(plane);

● フラグメントシェーダ

フラグメントシェーダでテクスチャを設定します。

const fragmentShader =`
	precision highp float;

	uniform float time;
	uniform vec3 diffuse;
	uniform vec3 emissive;

	//テクスチャの取得
	uniform sampler2D texture;
	uniform mat4 viewMatrix;

	~ 略 ~

	void main(void){
		
		~ 略 ~

		//テクスチャ
		vec3 color = texture2D(texture,vUv).rgb;

		//テクスチャを描画
		gl_FragColor = vec4(color * outgoingLight,diffuseColor.a);
	}
`;

PlaneGeometryをシェーダで波形アニメーション

● バーテックスシェーダ

シンプレックスノイズを使用して、PlaneGeometryを波形アニメーションさせます。シンプレックスノイズについては「GLSLでシンプレックスノイズ」を参考にしてください。

const vertexShader =`
	attribute vec3 position;
    attribute vec3 normal;
    attribute vec2 uv;

	uniform mat4 projectionMatrix;
	uniform mat4 modelViewMatrix;
	uniform mat3 normalMatrix;
	uniform float time;

	varying vec2 vUv;
	varying vec3 vViewPosition;
	varying vec3 vNormal;

    // webgl-noise

    // Description : Array and textureless GLSL 2D/3D/4D simplex noise functions.
    //      Author : Ian McEwan,Ashima Arts.
    //  Maintainer : stegu
    //     Lastmod : 20201014(stegu)
    //     License : Copyright(C)2011 Ashima Arts.All rights reserved.
    //               Distributed under the MIT License.See LICENSE file.
    //               https://github.com/ashima/webgl-noise
    //               https://github.com/stegu/webgl-noise

    vec3 mod289(vec3 x){ return x - floor(x * (1.0 / 289.0)) * 289.0; }
    vec4 mod289(vec4 x){ return x - floor(x * (1.0 / 289.0)) * 289.0; }
    vec4 permute(vec4 x){ return mod289(((x*34.0)+1.0)*x); }
    vec4 taylorInvSqrt(vec4 r){ return 1.79284291400159 - 0.85373472095314 * r; }

    float snoise(vec3 v){
        const vec2 C = vec2(1.0/6.0, 1.0/3.0);
        const vec4 D = vec4(0.0, 0.5, 1.0, 2.0);
        vec3 i  = floor(v + dot(v, C.yyy) );
        vec3 x0 = v - i + dot(i, C.xxx) ;
        vec3 g = step(x0.yzx, x0.xyz);
        vec3 l = 1.0 - g;
        vec3 i1 = min( g.xyz, l.zxy );
        vec3 i2 = max( g.xyz, l.zxy );
        vec3 x1 = x0 - i1 + C.xxx;
        vec3 x2 = x0 - i2 + C.yyy;
        vec3 x3 = x0 - D.yyy;
        i = mod289(i);
        vec4 p = permute(permute(permute(
                 i.z + vec4(0.0, i1.z, i2.z, 1.0))
               + i.y + vec4(0.0, i1.y, i2.y, 1.0))
               + i.x + vec4(0.0, i1.x, i2.x, 1.0));
        float n_ = 0.142857142857;
        vec3 ns = n_ * D.wyz - D.xzx;
        vec4 j = p - 49.0 * floor(p * ns.z * ns.z);
        vec4 x_ = floor(j * ns.z);
        vec4 y_ = floor(j - 7.0 * x_);
        vec4 x = x_ * ns.x + ns.yyyy;
        vec4 y = y_ * ns.x + ns.yyyy;
        vec4 h = 1.0 - abs(x) - abs(y);
        vec4 b0 = vec4(x.xy, y.xy);
        vec4 b1 = vec4(x.zw, y.zw);
        vec4 s0 = floor(b0)*2.0 + 1.0;
        vec4 s1 = floor(b1)*2.0 + 1.0;
        vec4 sh = -step(h, vec4(0.0));
        vec4 a0 = b0.xzyw + s0.xzyw*sh.xxyy;
        vec4 a1 = b1.xzyw + s1.xzyw*sh.zzww;
        vec3 p0 = vec3(a0.xy,h.x);
        vec3 p1 = vec3(a0.zw,h.y);
        vec3 p2 = vec3(a1.xy,h.z);
        vec3 p3 = vec3(a1.zw,h.w);
        vec4 norm = taylorInvSqrt(vec4(dot(p0,p0),dot(p1,p1),dot(p2, p2),dot(p3,p3)));
        p0 *= norm.x;
        p1 *= norm.y;
        p2 *= norm.z;
        p3 *= norm.w;
        vec4 m = max(0.5 - vec4(dot(x0,x0),dot(x1,x1),dot(x2,x2),dot(x3,x3)),0.0);
        m = m * m;
        return 105.0 * dot(m*m,vec4(dot(p0,x0),dot(p1,x1),dot(p2,x2),dot(p3,x3)));
    }

	void main(void){

		//シンプレックスノイズ
		vec3 pos = position;
		float noiseFreq = 3.5;
		float noiseAmp = 0.15;
		vec3 noisePos = vec3(pos.x * noiseFreq + time * 0.01,pos.y,pos.z);

		//波形アニメーション
		pos.z += snoise(noisePos) * noiseAmp;

		vUv = uv;
		vNormal = normalMatrix * normal;
		vec4 mvPosition = modelViewMatrix * vec4(pos,1.0);
		vViewPosition = mvPosition.xyz;

		gl_Position = projectionMatrix * mvPosition;
	}
`;

完成したデモになります。PlaneGeometryをシェーダで波形アニメーションさせてみました。カメラの位置やPointLightなどを調整しています。

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

関連記事

スポンサーリンク

前の記事へ

RawShaderMaterialにライトを設定

次の記事へ

シェーダで画像エフェクト