// 平面を立方体にする // 80と20だから4の倍数だわね // テクスチャ貼ってごまかしちゃえばいい // z座標使ってもいいけど事前に計算してattribute追加でもいいわね // はい // あとは順繰りに変化させましょう。おわり。 // ・・・数0～720に対してそれぞれ与える機構。 // zから決まる乱数。おわり！ let _gl, gl; let myFillShader; let universalVector; // fillShaderを召喚 let vsFill = "precision mediump float;" + "precision mediump int;" + "const float TAU = 6.28318;" + "const float PI = 3.14159;" + "const float rt2 = 1.41421;" + // ルート2. "const float rtHalf = 0.7071;" + // ルート1/2. "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 float uCount;" + // カウント制御 // uParamRatioの第一はフラグでこれがオフの場合は // uParamとuRatioでいつものように計算する // これが1の場合はuParamとuNextParamで球について計算し // 第二引数が示す割合で間を取る、法線も間を取る。おわり。 "varying highp vec2 vVertTexCoord;" + "varying vec3 vDiffuseColor;" + "varying vec3 vSpecularColor;" + "varying vec4 vVertexColor;" + "vec3 getLerp(float t, vec3 p1, vec3 p2, vec3 p3){" + " vec3 ratio = vec3(t - 120.0, t - 360.0, t - 600.0) / 120.0;" + " if(t < 120.0){ return p1; }" + " if(t < 240.0){" + " return p1 * (1.0 - ratio.x) + p2 * ratio.x;" + " }" + " if(t < 360.0){ return p2; }" + " if(t < 480.0){" + " return p2 * (1.0 - ratio.y) + p3 * ratio.y;" + " }" + " if(t < 600.0){ return p3; }" + " return p3 * (1.0 - ratio.z) + p1 * ratio.z;" + "}" + "void main(void){" + // 位置の変更はここでpのところをいじる " vec3 p = aPosition;" + " vec3 n = aNormal;" + " float theta = p.x;" + " float phi = p.y;" + " float index = p.z;" + // 0～215です // 法線ベクトル(立方体) " if(phi < PI * 0.5){ n = vec3(0.0, 0.0, 1.0); }" + " else if(phi > PI * 1.5){ n = vec3(0.0, 0.0, -1.0); }" + " else{" + " if(theta < PI * 0.5){ n = vec3(1.0, 1.0, 0.0) * rtHalf; }" + " else if(theta < PI){ n = vec3(-1.0, 1.0, 0.0) * rtHalf; }" + " else if(theta < PI * 1.5){ n = vec3(-1.0, -1.0, 0.0) * rtHalf; }" + " else{ n = vec3(1.0, -1.0, 0.0) * rtHalf; }" + " }" + // 位置ベクトル(立方体) " p.z = min(max((PI - phi)/PI, -0.5), 0.5);" + " p.x = max(sqrt(0.5)-sqrt(2.0)*theta/PI, -3.0*sqrt(0.5)+sqrt(2.0)*theta/PI);" + " p.y = max(min(sqrt(2.0)*theta/PI, sqrt(2.0)-sqrt(2.0)*theta/PI), -2.0*sqrt(2.0)+sqrt(2.0)*theta/PI);" + " float factor = (PI*0.5 < phi && phi < PI*1.5 ? 1.0 : 1.0 - abs(phi-PI)/PI);" + " p.x *= factor;" + " p.y *= factor;" + // 法線ベクトル（球） " float psi = (PI-phi)*0.5;" + " vec3 nSphere = vec3(cos(psi)*cos(theta), cos(psi)*sin(theta), sin(psi));" + // 位置ベクトル（球） " vec3 pSphere = nSphere * 0.5;" + // 位置ベクトル（トーラス） " vec3 pTorus = vec3((0.4-0.1*cos(phi))*cos(theta), (0.4-0.1*cos(phi))*sin(theta), 0.1*sin(phi));" + // 法線ベクトル（トーラス） " vec3 nTorus = vec3(cos(phi)*cos(theta), cos(phi)*sin(theta), sin(phi));" + // インデックスベクトル " vec3 ind;" + " ind.x = mod(index, 6.0);" + " index = floor(index / 6.0);" + " ind.y = mod(index, 6.0);" + " ind.z = floor(index / 6.0);" + // カウントをずらして・・ " float cnt = mod(uCount + 720.0 - index * 1.5, 720.0);" + // これをもとに取得 " vec3 finalPos = getLerp(cnt, p, pTorus, pSphere);" + " vec3 finalNor = getLerp(cnt, n, nTorus, nSphere);" + " finalNor /= length(finalNor);" + // 45°回転 " finalPos.xy *= mat2(1.0, -1.0, 1.0, 1.0) * rtHalf;" + // オフセット考慮 " vec3 offset = 1.2 * ind - 3.0;" + " finalPos += offset;" + // 位置 " 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 = uMaterialColor;" + " col.rgb = col.rgb * vDiffuseColor + vSpecularColor;" + " gl_FragColor = col;" + "}"; let bg; 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); bg.textSize(20); bg.textAlign(LEFT, TOP); } function draw() { const start = performance.now(); resetShader(); gl.disable(gl.DEPTH_TEST); texture(bg); plane(width, height); gl.enable(gl.DEPTH_TEST); resetShader(); noStroke(); fill(255); shader(myFillShader); const uRatio = getRatio(); myFillShader.setUniform("uRatio", uRatio); myFillShader.setUniform("uCount", properFrameCount); directionalLight(255, 255, 255, 0, 0, 1); ambientLight(128); rotateX(frameCount * 0.005); rotateZ(frameCount * 0.01); rotateY(frameCount * 0.015); //myCube(200); const sz = min(width, height) / 16; myPole(24, 16, sz); const end = performance.now(); const ratio = (end - start) * 60 / 1000; bg.background(0); bg.fill(255); bg.text(ratio.toFixed(3), 5, 5); properFrameCount++; } function getRatio(){ const f = (properFrameCount % 480); if(f>=120 && f<240){ let g = (f-120)/120; return g*g*(3-2*g); } if(f>=360){ let h = (480-f)/120; return h*h*(3-2*h); } return (f<240 ? 0 : 1); } // 中心は原点 // dmは断面方向のディテール // dnは長さ方向のディテール // 216枚の板 function myPole(dn, dm, s){ 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, id00, id01, id10, id11; let vertNum=0; for(z=0;z<216;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, z/2.16, 100*phi/TAU, 100); vertNum++; } } } let polygonNum=0; let offset = 0; for(z=0;z<216;z++){ for(let i=0;i

cube-torus-sphere