// フォワードレンダリングテンプレート。このまま残しておいて。 // 通常のメッシュの場合 // 方針 // Terrainのジオメトリーを移植 // vertexShaderの中で位置をいじる // 法線もいじる // 終了！ // 余裕があったらcopyPainterで背景設定 // 余裕があったら平面上になんかアニメーションを付与する // というわけでまずはバーテックスシェーダでnoiseを使えるようにするのと // detailed Planeを作るのが最初ですね～ // それ専用の改変シェーダが必要ですね // 別に用意するかどうかがネックですが、 // ノイズ入れてる時点で別立て前提なので別名で用意した方がいいかと // 2023-04-03 // さてと // p5Noise移植してみるか...？？ // あっさりできました...何だったんだ。 // 動かせました。ほんと、何だったんだ...... // frameRate()用意しますね // pixelDensity(1); // 今後の課題 // alpha関連のブレンドをきちんとしたうえで透明度テクスチャを試してみる // あるいは // orbitControlを実装したいかな...マウスダウンとタッチの両方 // これはp5wgexの仕様変更、じゃないですね、機能追加になります。 // そんなところ // あとsphereとtorusの表面を波打たせてみたいですね。 // おわり // 2023-04-04 // 透明度のチェックできましたよ。おけ！ // aVertexColorとuMonoColorをvec4にして透明度が適用されることを確認しました。 // 2023-07-18 // p5.js/1.7.0になりました // orbitControl()が新しくなったんですが // そのままでは移植できないので // 本家のコードをちょこっといじって // perspective()がそのまま機能するようにしました // いわゆる横着です。 // 当面はこれで満足してください。 // orbitControl()のパッチを組み込みました const ex = p5wgex; let _node; const _timer = new ex.Timer(); let _cam; const _tf = new ex.TransformEx(); let myCam, lastCam, initialCam; let countForReset = 30; // ----------------------------------------------- light ------------------------------------------------ // // 現時点でのライティング。 // 場合によっては頂点テクスチャフェッチでModelを頂点の付属idかなんかから読み込んで // まとめて位置を変換する場合もある。その場合ModelViewは不要でViewだけ放り込み、 // Modelと掛けて法線を出し、Projectionと掛けて正規化デバイスの位置を出す。 const lightVert = `#version 300 es in vec3 aPosition; in vec4 aVertexColor; in vec3 aNormal; in vec2 aTexCoord; uniform mat4 uModelViewMatrix; uniform mat4 uProjMatrix; out vec4 vVertexColor; out vec3 vNormal; out vec3 vViewPosition; out vec2 vTexCoord; void main(void){ // 場合によってはaPositionをいじる（頂点位置） // 場合によってはaNormalもここで計算するかもしれない vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0); // Pass varyings to fragment shader vViewPosition = viewModelPosition.xyz; gl_Position = uProjMatrix * viewModelPosition; mat3 normalMatrix; // こうしよう。[0]で列ベクトルにアクセス。 normalMatrix[0] = uModelViewMatrix[0].xyz; normalMatrix[1] = uModelViewMatrix[1].xyz; normalMatrix[2] = uModelViewMatrix[2].xyz; normalMatrix = inverse(transpose(normalMatrix)); // これでいい。 vNormal = normalMatrix * aNormal; vVertexColor = aVertexColor; vTexCoord = aTexCoord; } `; const customLightVert = `#version 300 es in vec3 aPosition; in vec4 aVertexColor; in vec3 aNormal; in vec2 aTexCoord; uniform mat4 uModelViewMatrix; uniform mat4 uProjMatrix; uniform sampler2D uRandom; uniform float uTime; out vec4 vVertexColor; out vec3 vNormal; out vec3 vViewPosition; out vec2 vTexCoord; float getPerlin(int n){ n = n & 4095; float i = float(n); float x = mod(i, 64.0) + 0.5; float y = floor(i / 64.0) + 0.5; return texture(uRandom, vec2(x, y) / 64.0).r; } float scaled_cosine(float x){ return 0.5 * (1.0 - cos(x * 3.14159)); } float noise(float x, float y, float z){ x = abs(x); y = abs(y); z = abs(z); int xi = int(floor(x)); int yi = int(floor(y)); int zi = int(floor(z)); float xf = x - floor(x); float yf = y - floor(y); float zf = z - floor(z); float rxf; float ryf; float r = 0.0; float ampl = 0.5; float n1 = 0.0; float n2 = 0.0; float n3 = 0.0; for(int octave = 0; octave < 4; octave++){ int of = xi + (yi << 4) + (zi << 8); rxf = scaled_cosine(xf); ryf = scaled_cosine(yf); n1 = getPerlin(of); n1 += rxf * (getPerlin(of + 1) - n1); n2 = getPerlin(of + 16); n2 += rxf * (getPerlin(of + 16 + 1) - n2); n1 += ryf * (n2 - n1); of += 256; n2 = getPerlin(of); n2 += rxf * (getPerlin(of + 1) - n2); n3 = getPerlin(of + 16); n3 += rxf * (getPerlin(of + 16 + 1) - n3); n2 += ryf * (n3 - n2); n1 += scaled_cosine(zf) * (n2 - n1); r += n1 * ampl; ampl *= 0.5; xi <<= 1; xf *= 2.0; yi <<= 1; yf *= 2.0; zi <<= 1; zf *= 2.0; if (xf >= 1.0) { xi++; xf--; } if (yf >= 1.0) { yi++; yf--; } if (zf >= 1.0) { zi++; zf--; } } return r; } void main(void){ // 場合によってはaPositionをいじる（頂点位置） vec3 p = aPosition; vec2 q = p.xy + 1.0; float height = uTime; vec2 shift = vec2(0.6, 0.8) * uTime; q += shift; p.z = noise(q.x, q.y, height); vec3 n = aNormal; float dt = 1.0/100.0; n = normalize( vec3( -(noise(q.x + dt, q.y, height) - noise(q.x - dt, q.y, height)) / (2.0*dt), -(noise(q.x, q.y + dt, height) - noise(q.x, q.y - dt, height)) / (2.0*dt), 1.0 ) ); // 場合によってはaNormalもここで計算するかもしれない vec4 viewModelPosition = uModelViewMatrix * vec4(p, 1.0); // Pass varyings to fragment shader vViewPosition = viewModelPosition.xyz; gl_Position = uProjMatrix * viewModelPosition; mat3 normalMatrix; // こうしよう。[0]で列ベクトルにアクセス。 normalMatrix[0] = uModelViewMatrix[0].xyz; normalMatrix[1] = uModelViewMatrix[1].xyz; normalMatrix[2] = uModelViewMatrix[2].xyz; normalMatrix = inverse(transpose(normalMatrix)); // これでいい。 vNormal = normalMatrix * n; vVertexColor = aVertexColor; vTexCoord = aTexCoord; } `; // とりまmediumpで。 const lightFrag = `#version 300 es precision mediump float; // -------------------- ライティング関連 -------------------- // // ビュー行列 uniform mat4 uViewMatrix; // 汎用色 uniform vec3 uAmbientColor; uniform float uShininess; // specularに使う、まあこれが大きくないと見栄えが悪いのです。光が集中する。 uniform vec3 uAttenuation; // デフォルトは1,0,0. pointLightで使う // directionalLight関連 uniform int uDirectionalLightCount; // デフォ0なのでフラグ不要 uniform vec3 uLightingDirection[5]; uniform vec3 uDirectionalDiffuseColor[5]; uniform vec3 uDirectionalSpecularColor[5]; // specular用 // pointLight関連 uniform int uPointLightCount; // これがデフォルトゼロであることによりフラグが不要となる。 uniform vec3 uPointLightLocation[5]; uniform vec3 uPointLightDiffuseColor[5]; uniform vec3 uPointLightSpecularColor[5]; // specular用 // light flag. uniform bool uUseSpecular; // デフォルトはfalse; // 係数 const float diffuseCoefficient = 0.73; const float specularCoefficient = 2.0; // -------------------- マテリアル関連 -------------------- // // 描画フラグ各種 const int USE_VERTEX_COLOR = 0; const int USE_MONO_COLOR = 1; const int USE_UV_COLOR = 2; // そのうち。 uniform int uUseColorFlag; // 0:vertex. 1:mono. 2:UV uniform vec4 uMonoColor; // monoColorの場合 uniform sampler2D uTex; // uvColorの場合 in vec4 vVertexColor; in vec3 vNormal; in vec3 vViewPosition; in vec2 vTexCoord; // テクスチャ // -------------------- その他 -------------------- // out vec4 fragColor; // 出力。 // -------------------- ライティング処理 -------------------- // float lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal){ return max(0.0, dot(-lightDirection, surfaceNormal)); } // 要は目に飛び込んでくるなら明るくなるでしょって話 float phongSpecular(vec3 lightDirection, vec3 viewDirection, vec3 surfaceNormal){ vec3 R = reflect(lightDirection, surfaceNormal); return pow(max(0.0, dot(R, viewDirection)), uShininess); // shininessはuniformでいいや。 } // DirectionalLight項の計算。 void applyDirectionalLightDiffuseColor(vec3 direction, vec3 diffuseColor, vec3 specularColor, vec3 modelPosition, vec3 normal, out vec3 diffuse, out vec3 specular){ vec3 viewDirection = normalize(-modelPosition); vec3 lightVector = (uViewMatrix * vec4(direction, 0.0)).xyz; vec3 lightDir = normalize(lightVector); vec3 lightColor = diffuseColor; // 色計算 float diffuseFactor = lambertDiffuse(lightDir, normal); diffuse += diffuseFactor * lightColor; // diffuse成分を足す。 if(uUseSpecular){ float specularFactor = phongSpecular(lightDir, viewDirection, normal); specular += specularFactor * lightColor * specularColor; } } // PointLight項の計算。attenuationも考慮。 void applyPointLightDiffuseColor(vec3 location, vec3 diffuseColor, vec3 specularColor, vec3 modelPosition, vec3 normal, out vec3 diffuse, out vec3 specular){ vec3 viewDirection = normalize(-modelPosition); vec3 lightPosition = (uViewMatrix * vec4(location, 1.0)).xyz; vec3 lightVector = modelPosition - lightPosition; vec3 lightDir = normalize(lightVector); float lightDistance = length(lightVector); float d = lightDistance; float lightFallOff = 1.0 / dot(uAttenuation, vec3(1.0, d, d*d)); // 色計算 vec3 lightColor = lightFallOff * diffuseColor; float diffuseFactor = lambertDiffuse(lightDir, normal); diffuse += diffuseFactor * lightColor; // diffuse成分を足す。 if(uUseSpecular){ float specularFactor = phongSpecular(lightDir, viewDirection, normal); specular += specularFactor * lightColor * specularColor; } } // _lightはこれで。 vec3 totalLight(vec3 modelPosition, vec3 normal, vec3 materialColor){ vec3 diffuse = vec3(0.0); // diffuse成分 vec3 specular = vec3(0.0); // ついでに // directionalLightの影響を加味する for(int i=0; i { return [a, b, a+0.25, b, a, b+0.25, a+0.25, b+0.25]; } const uv = []; uv.push(...createUV(0.375, 0)); uv.push(...createUV(0.375, 0.25)); uv.push(...createUV(0.375, 0.5)); uv.push(...createUV(0.375, 0.75)); uv.push(...createUV(0.125, 0.25)); uv.push(...createUV(0.625, 0.25)); const vc = []; for(let i=0; i<24; i++){ const x = v[3*i]; const y = v[3*i+1]; const z = v[3*i+2]; const col = ex.hsv2rgb(hue, 0.4*(z+1), 1); vc.push(col.r, col.g, col.b, 1); } node.registFigure(name, [ {name:"aPosition", size:3, data:v}, {name:"aNormal", size:3, data:n}, {name:"aVertexColor", size:4, data:vc}, {name:"aTexCoord", size:2, data:uv} ]); node.registIBO(name + "IBO", {data:f}); // 一応。 } // 雑。z軸に平行な平面。 function registPlane(node, name, left=-1, right=1, bottom=-1, top=1, height=0){ const p0 = [left, bottom, height]; const p1 = [right, bottom, height]; const p2 = [left, top, height]; const p3 = [right, top, height]; const v = [p0, p1, p2, p3].flat(); const uv = [0, 1, 1, 1, 0, 0, 1, 0]; const f = [0, 1, 2, 2, 1, 3]; const n = [0, 0, 1, 0, 0, 1, 0, 0, 1, 0, 0, 1]; const vc = [1,1,1,1, 1,1,1,1, 1,1,1,1, 1,1,1,1]; // 真っ白 node.registFigure(name, [ {name:"aPosition", size:3, data:v}, {name:"aNormal", size:3, data:n}, {name:"aVertexColor", size:4, data:vc}, {name:"aTexCoord", size:2, data:uv} ]); node.registIBO(name + "IBO", {data:f}); // 一応。 } // テラインですが、高さは内部でいじるので、実質的にはいわゆるdetailed planeですね。 // 同じやり方で球の表面をぼこぼこさせることも可能だと思います...トーラスとか。法線方向に。できるかどうか分からないけど。 // 4Dノイズでやればいける？ function registTerrain(node, name, detail){ const L = detail/2; const dt = 1/detail; const v = []; const uv = []; const f = []; const n = []; const vc = []; for(let k=0; k

waving terrain