let _gl, gl; let myFillShader; let universalVector; // fillShaderを召喚 let vsFill = "precision mediump float;" + "precision mediump int;" + "const float TAU = 6.28318;" + "uniform mat4 uViewMatrix;" + "uniform bool uUseLighting;" + "uniform int uAmbientLightCount;" + "uniform vec3 uAmbientColor[5];" + "uniform int uDirectionalLightCount;" + "uniform vec3 uLightingDirection[5];" + "uniform vec3 uDirectionalDiffuseColors[5];" + "uniform vec3 uDirectionalSpecularColors[5];" + "const float specularFactor = 2.0;" + "const float diffuseFactor = 0.73;" + "struct LightResult{" + " float specular;" + " float diffuse;" + "};" + "float _lambertDiffuse(vec3 lightDirection, vec3 surfaceNormal){" + // ここですね。法線ベクトルとライトベクトルで内積を取ってるのは。 " return max(0.0, dot(-lightDirection, surfaceNormal));" + "}" + "LightResult _light(vec3 viewDirection, vec3 normal, vec3 lightVector){" + " vec3 lightDir = normalize(lightVector);" + //compute our diffuse & specular terms " LightResult lr;" + " lr.diffuse = _lambertDiffuse(lightDir, normal);" + " return lr;" + "}" + "void totalLight(vec3 modelPosition, vec3 normal, out vec3 totalDiffuse, out vec3 totalSpecular){" + // Diffuseのデフォは1.0でSpecularのデフォは0.0です。まあ当然よね。 " totalSpecular = vec3(0.0);" + " if(!uUseLighting){" + " totalDiffuse = vec3(1.0);" + " return;" + " }" + // ライティング使ってるならDiffuseをいちから計算する " totalDiffuse = vec3(0.0);" + " vec3 viewDirection = normalize(-modelPosition);" + // これ以降の処理は定められたライトに対してのみ行なわれる感じね " for(int j = 0; j < 5; j++){" + " if(j < uDirectionalLightCount){" + " vec3 lightVector = (uViewMatrix * vec4(uLightingDirection[j], 0.0)).xyz;" + " vec3 lightColor = uDirectionalDiffuseColors[j];" + " vec3 specularColor = uDirectionalSpecularColors[j];" + " LightResult result = _light(viewDirection, normal, lightVector);" + " totalDiffuse += result.diffuse * lightColor;" + " totalSpecular += result.specular * lightColor * specularColor;" + " }" + " }" + "}" + // こっから下が追加部分 // ライティング適用するならほんとはこういうの書かないといけなかったのよね // ディレクショナルオンリーにして余計な部分省いてもいいけど // アンビエント追加 // include lighting.glgl "attribute vec3 aPosition;" + "attribute vec3 aNormal;" + "attribute vec2 aTexCoord;" + "attribute vec4 aMaterialColor;" + "uniform mat4 uModelViewMatrix;" + "uniform mat4 uProjectionMatrix;" + "uniform mat3 uNormalMatrix;" + "uniform float uRatio;" + // 球とトーラスノット入れ替え用 "uniform vec4 uParam;" + "uniform float uParamRatio;" + // パラメータ移行用 "uniform vec4 uNextParam;" + // 次のパラメータ // uParamRatioの第一はフラグでこれがオフの場合は // uParamとuRatioでいつものように計算する // これが1の場合はuParamとuNextParamで球について計算し // 第二引数が示す割合で間を取る、法線も間を取る。おわり。 "varying highp vec2 vVertTexCoord;" + "varying vec3 vDiffuseColor;" + "varying vec3 vSpecularColor;" + "varying vec4 vVertexColor;" + // 現パターンと次のパターンでラープする "vec3 func(float t){" + " float x1 = (uParam.x + uParam.y * cos(uParam.z * t)) * cos(uParam.w * t);" + " float y1 = (uParam.x + uParam.y * cos(uParam.z * t)) * sin(uParam.w * t);" + " float z1 = uParam.y * sin(uParam.z * t);" + " float x2 = (uNextParam.x + uNextParam.y * cos(uNextParam.z * t)) * cos(uNextParam.w * t);" + " float y2 = (uNextParam.x + uNextParam.y * cos(uNextParam.z * t)) * sin(uNextParam.w * t);" + " float z2 = uNextParam.y * sin(uNextParam.z * t);" + " return vec3(x1, y1, z1) * (1.0 - uParamRatio) + vec3(x2, y2, z2) * uParamRatio;" + "}" + "vec3 getTan(float t, float delta){" + " vec3 v = func(t + delta) - func(t);" + " v /= length(v);" + " return v;" + "}" + "void main(void){" + // 位置の変更はここでpのところをいじる // p.zが0～19でこれによりphiを割る感じ？ " vec3 p = aPosition;" + " float theta = p.x;" + " float phi = TAU*p.z/20.0 + p.y/20.0;" + " float delta = TAU / 80.0;" + " vec4 prm = vec4(1.0, 0.4, 4.0, 3.0);" + // パラム // フルネセレ " vec3 tanVec = getTan(phi, delta);" + " vec3 tanVecBack = -getTan(phi, -delta);" + " vec3 mainNor = tanVec-tanVecBack;" + " mainNor /= length(mainNor);" + " vec3 subNor = cross(tanVec, mainNor);" + " vec3 _p = func(phi);" + // 中心。これはTAU*(p.z+0.5)/20.0で出るよ。 " float cPhi = TAU*(p.z+0.5)/20.0;" + // 中心でフルネセレ " vec3 cTanVec = getTan(cPhi, delta);" + " vec3 cTanVecBack = -getTan(cPhi, -delta);" + " vec3 cMainNor = cTanVec - cTanVecBack;" + " cMainNor /= length(cMainNor);" + " vec3 cSubNor = cross(cTanVec, cMainNor);" + " vec3 cCenter = func(cPhi);" + // 球面上の位置 " vec3 spherePos = cCenter;" + " float phi2 = (phi - cPhi) * 20.0;" + // -PI/2～PI/2に正規化 " vec3 verti = 0.25*sin(phi2)*cTanVec;" + " vec3 hori = (1.0-0.25*cos(phi2))*(cos(theta)*cMainNor+sin(theta)*cSubNor);" + " spherePos += 0.25 * (verti + hori);" + // この場合の法線ベクトル " vec3 sphereNor = -sin(phi2)*cTanVec - cos(theta)*cMainNor+sin(theta)*cSubNor;" + // 法線ベクトル " vec3 n = -cos(theta) * mainNor - sin(theta) * subNor;" + " p = _p - 0.25*n;" + // 最終決定 " float ratio = uRatio * uRatio * (3.0 - 2.0 * uRatio);" + " vec3 finalPos = spherePos * (1.0 - ratio) + p * ratio;" + " vec3 finalNor = sphereNor * (1.0 - ratio) + n * ratio;" + " finalNor /= length(finalNor);" + // 位置 " vec4 viewModelPosition = uModelViewMatrix * vec4(finalPos, 1.0);" + " gl_Position = uProjectionMatrix * viewModelPosition;" + // 法線 " vec3 vertexNormal = normalize(uNormalMatrix * finalNor);" + " vVertTexCoord = aTexCoord;" + " vVertexColor = aMaterialColor;" + // totalLight // ここでvDiffuseColorとvSpecularColorに色情報をぶち込んでる // それらはここでは使われずvarying経由でlightTextureに送られて参照され色が決まる " totalLight(viewModelPosition.xyz, vertexNormal, vDiffuseColor, vSpecularColor);" + " for(int i = 0; i < 5; i++){" + " if (i < uAmbientLightCount){" + " vDiffuseColor += uAmbientColor[i];" + " }" + " }" + "}"; // 若干変更しました // tintは使いたかったら0～1で今まで通り指定して掛けたかったら掛けてね // テクスチャで色変えたかったらvVertTexCoordに入ってるから // 自由に加工して使ってね // 以上 let fsFill = "precision mediump float;" + "uniform vec4 uMaterialColor;" + "uniform vec4 uTint;" + "uniform sampler2D uSampler;" + "uniform bool isTexture;" + "uniform bool uEmissive;" + "varying highp vec2 vVertTexCoord;" + "varying vec3 vDiffuseColor;" + "varying vec3 vSpecularColor;" + "varying vec4 vVertexColor;" + // getRGB,参上！ "vec3 getRGB(float h, float s, float b){" + " vec3 c = vec3(h, s, b);" + " vec3 rgb = clamp(abs(mod(c.x * 6.0 + vec3(0.0, 4.0, 2.0), 6.0) - 3.0) - 1.0, 0.0, 1.0);" + " rgb = rgb * rgb * (3.0 - 2.0 * rgb);" + " return c.z * mix(vec3(1.0), rgb, c.y);" + "}" + "void main(void) {" + " vec4 col = vVertexColor;" + " col.rgb = col.rgb * vDiffuseColor + vSpecularColor;" + " gl_FragColor = col;" + "}"; let bg; let uP = {}; let uNP = {}; let index = 0; let ptn = []; let properFrameCount = 0; function setup() { _gl = createCanvas(windowWidth, windowHeight, WEBGL); gl = _gl.GL; universalVector = createVector(0, 0, 0); myFillShader = createShader(vsFill, fsFill); gl.enable(gl.DEPTH_TEST); bg = createGraphics(width, height); ptn = [{x:1,y:1}, {x:3,y:2}, {x:5,y:2}, {x:7,y:2}, {x:8,y:3}, {x:7,y:4}, {x:9,y:2}, {x:9,y:4}]; } function draw() { resetShader(); gl.disable(gl.DEPTH_TEST); bg.background(0); texture(bg); plane(width, height); gl.enable(gl.DEPTH_TEST); resetShader(); noStroke(); fill(255); shader(myFillShader); const uRatio = getRatio(); const uParamRatio = getParamRatio(); if(properFrameCount % 720 == 0){ setParam(); } myFillShader.setUniform("uRatio", uRatio); myFillShader.setUniform("uParamRatio", uParamRatio); myFillShader.setUniform("uParam", [1.6, 0.4, uP.x, uP.y]); myFillShader.setUniform("uNextParam", [1.6, 0.4, uNP.x, uNP.y]); directionalLight(255, 255, 255, 0, 0, 1); ambientLight(64); rotateX(frameCount * 0.01); rotateZ(frameCount * 0.02); //rotateY(frameCount * 0.03); //myCube(200); const sz = min(width, height) * 0.18; myPole(160, 20, sz, sz, sz); properFrameCount++; } // 中心は原点 // dmは断面方向のディテール // dnは長さ方向のディテール // 20枚の板の貼り合わせ。 function myPole(dn, dm, sx, sy, sz){ const gId = `myPole|${dn}|${dm}`; if(!_gl.geometryInHash(gId)){ const start = performance.now(); const _geom = new p5.Geometry(); let _set, _pos; let theta, phi, x, y, z, r, id00, id01, id10, id11; let vertNum=0; for(let z=0;z<20;z++){ for(let i=0;i<=dn;i++){ phi = TAU*i/dn; for(let k=0;k<=dm;k++){ theta = TAU*k/dm; x = theta; y = phi; setV(_geom, x, y, z); setColHSV(_geom, phi*5/TAU + z*5, 50+50*cos(theta), 100); vertNum++; } } } let polygonNum=0; let offset=0; for(let z=0;z<20;z++){ for(let i=0;i