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などを調整しています。