2021年04月29日 - WebVR・Three.js
PlaneGeometryをシェーダで波形アニメーション

「RawShaderMaterialにライトを設定」に続き、「Create a Wave Motion Effect on an Image with Three.js」を参考に、PlaneGeometryをシェーダで波形アニメーションさせてみました。※Three.jsはr128を使用しています。
RawShaderMaterialにテクスチャを設定
波形アニメーションの前に、RawShaderMaterialにテクスチャを設定します。
RawShaderMaterialの場合、テクスチャはuniformsでシェーダに送りますが、THREE.UniformsUtils.mergeを使用する場合、後からテクスチャを設定し直す必要があります。
//テクスチャ画像の読み込み
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などを調整しています。

