// とりあえず影分かったのでいろいろ省略したバージョン作ろうか // 平行光でlilとかでいじるかもしくはカメラをいじる。はい。 // 簡単なヘルパー欲しいかもしれない... // まずディファードで書き直したうえで // それとは別にマスクを用意して掛けるだけ // 先にディファード作っちゃうか... // modelPositionとnormalとcolorが必要でそれらから最終的な色を出力してbaseに格納 // その一方で影マスク // 両者をまとめて出力 // 背景も用意するつもり // 床はチェックで // トーラスは10個？くらいまわす、例のあれでドローコールは1回で済ませる感じで。とりあえずそこまで。 // normalだけだともったいないから4番目にdepth入れてvec4にしよう。何かに使えるだろ。 // registBunny. registModel? // uModel, uView, uProj, uModelView, uViewProj, uModelViewProjで名前を統一する。 // 統一することでメソッド化出来る可能性が高まるので。それで。 // おかしいな真っ黒だと思ったらdrawFigure命令してなかった（馬鹿） // --------------------------------------------- global ----------------------------------------------- // const ex = p5wgex; let _node; const _timer = new ex.Timer(); let cam0, cam1; let _tf = new ex.TransformEx(); // ----------------------------------------------- light ------------------------------------------------ // const colorVert = `#version 300 es in vec3 aPosition; in vec3 aVertexColor; in vec3 aNormal; in vec2 aTexCoord; uniform mat4 uModelViewMatrix; uniform mat4 uProjMatrix; // ModelViewProjectionだとさすがに長すぎるので統一目的でProjに短縮 out vec3 vVertexColor; out vec3 vNormal; out vec3 vViewPosition; out vec2 vTexCoord; out vec4 vNDC; void main(void){ // 場合によってはaPositionをいじる（頂点位置） // 場合によってはaNormalもここで計算するかもしれない vec4 viewModelPosition = uModelViewMatrix * vec4(aPosition, 1.0); // Pass varyings to fragment shader vViewPosition = viewModelPosition.xyz; vec4 NDcoord = uProjMatrix * viewModelPosition; // 正規化デバイス座標 gl_Position = NDcoord; vNDC = NDcoord; 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 colorFrag = `#version 300 es precision mediump float; // -------------------- マテリアル関連 -------------------- // // 描画フラグ各種 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 vec3 uMonoColor; // monoColorの場合 uniform sampler2D uTex; // uvColorの場合 uniform vec3 uTint; // texture関連でtextureに色を付与したい場合のためのオプション。掛けるだけ。 in vec3 vVertexColor; in vec3 vNormal; in vec3 vViewPosition; in vec2 vTexCoord; // テクスチャ in vec4 vNDC; // -------------------- 出力その他 -------------------- // layout (location = 0) out vec4 materialColor; layout (location = 1) out vec4 viewPosition; layout (location = 2) out vec4 normal; // -------------------- メインコード -------------------- // void main(void){ // 白。デフォルト。 vec4 col = vec4(1.0); // マテリアルカラーの計算 if(uUseColorFlag == USE_VERTEX_COLOR){ col.rgb = vVertexColor; // 頂点色 } if(uUseColorFlag == USE_MONO_COLOR) { col.rgb = uMonoColor; // uMonoColor単色 } if(uUseColorFlag == USE_UV_COLOR){ vec2 tex = vTexCoord; tex.y = 1.0 - tex.y; col = texture(uTex, tex); col.rgb *= uTint; if(col.a < 0.1){ discard; } } materialColor = col; float depth = 0.5 * (vNDC.z / vNDC.w) + 0.5; normal = vec4(vNormal, depth); viewPosition = vec4(vViewPosition, 1.0); // んー...んー... } `; // 一度やってるから、緊張しなければいけるはず。 // データ格納時に左下のpixelが(0,0)に格納される。で、ここのvUvは(0,0)で取得した色を左下に置くので反転の必要が無いってわけ。 const deferVert = `#version 300 es in vec2 aPosition; out vec2 vUv; void main(){ vUv = 0.5 * aPosition + 0.5; gl_Position = vec4(aPosition, 0.0, 1.0); } `; // normal, color, modelPositionよりfinalColorを計算して出力する。 const deferFrag = `#version 300 es precision mediump float; // ---------------- sampler ------------------ // uniform sampler2D uMaterialColor; // ubyteの4 uniform sampler2D uViewPosition; // floatの4 uniform sampler2D uNormal; // floatの4 // -------------------- ライティング関連 -------------------- // // ビュー行列 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用 // spotLight関連 uniform int uSpotLightCount; // 0～5 uniform vec3 uSpotLightDirection[5]; uniform vec3 uSpotLightLocation[5]; uniform float uSpotLightAngle[5]; uniform float uSpotLightConc[5]; uniform vec3 uSpotLightDiffuseColor[5]; uniform vec3 uSpotLightSpecularColor[5]; // specular用 // light flag. uniform bool uUseSpecular; // デフォルトはfalse; // 係数 const float diffuseCoefficient = 0.73; const float specularCoefficient = 2.0; // -------------------- ライティング処理 -------------------- // 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 applyDirectionalLight(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 applyPointLight(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; } } // SpotLight項の計算。attenuationは共通で。 // locationとdirectionが両方入っているうえ、光源の開き(angle)と集中度合い(conc)が追加されて複雑になってる。 void applySpotLight(vec3 location, vec3 direction, float angle, float conc, 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; // locationは光の射出位置 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)); // falloffは光それ自身の減衰で、これに加えてspot（angleで定義されるcone状の空間）からのずれによる減衰を考慮 float spotFalloff; vec3 lightDirection = (uViewMatrix * vec4(direction, 0.0)).xyz; // lightDirはモデルに向かうベクトル、lightDirectionはスポットライトの向きとしての光の向き。そこからのずれで減衰させる仕組み。 float spotDot = dot(lightDir, normalize(lightDirection)); if(spotDot < cos(angle)){ spotFalloff = 0.0; }else{ spotFalloff = pow(spotDot, conc); // cosが大きいとは角度が小さいということ } lightFalloff *= spotFalloff; // あとはpointLightと同じ計算を行ない最後にfalloffを考慮する // 色計算 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 0.5){ cam0.arise(-0.01); } } function createShadowMap(shadowFBOName, modelCam, lightCam){ // まずcam1からの深度値が欲しい。 _node.bindFBO(shadowFBOName).clearColor(0,0,0,0).clear(); _node.usePainter("calcDepth"); // 深度値を書き込む（ちょっと大きくする） renderTorus(_node, _tf, lightCam, "mvp"); renderPlane(_node, _tf, lightCam, "mvp"); _node.swapFBO(shadowFBOName).unbind(); //ex.copyPainter(_node, {src:{type:"fb", name:"shadow"}}); // 次に比較を行なう。ただしさっきの...を使う。 _node.bindFBO(shadowFBOName); _node.clearColor(0,0,0,0).clear(); _node.usePainter("generateDepthMask"); _node.setFBOtexture2D("uDepthMap", shadowFBOName); // さっきの結果をここで読み込んで // 2つのmvpを入れて比較する。先にcam1のvpをlightという形で入れとく。 const viewMat1 = lightCam.getViewMat().m; const projMat1 = lightCam.getProjMat().m; _node.setUniform("uLightVPMatrix", ex.getMult4x4(viewMat1, projMat1)); // 比較用にレンダリング（比べるだけ） renderTorus(_node, _tf, modelCam, "m_vp"); renderPlane(_node, _tf, modelCam, "m_vp"); _node.swapFBO(shadowFBOName).unbind(); } function updateInfo(){ const gr = _node.getTextureSource("info"); gr.clear(); gr.text(frameRate().toFixed(2), 5, 5); _node.updateTexture("info"); } function showInfo(){ ex.copyPainter(_node, {src:{name:"info", gradationFlag:1, gradationStart:[0.5, 0, 0, 0, 0, 1], gradationStop:[0.5, 1, 0, 0, 1, 1]}}); } /* // compositeでまとめて描画できるようにする。 function compositeMeshes(node, name = "scene", figures = []){ const positions = []; const normals = []; const faces = []; const indices = []; let offset = 0; for(let l=0; l

#p5js