vColor = aColor; @fs

materialColor = vColor; `); l3d.build(` @common vec3 vColor; @vs 2 mat4 aTransform; 6 vec3 aColor; float uCount; const float TAU = 6.28318; /* vec3 e3 = cross(e1, e2); float spin = uCount * TAU / 60.0; // 進行方向の周りに回転しないかなぁ mat3 m = mat3(e1, e2 * cos(spin) - e3 * sin(spin), e2 * sin(spin) + e3 * cos(spin)); float scaleX = 1.25 * (1.0 + 0.5 * sin(uCount * TAU / 30.0)); float scaleY = 0.75 * (1.0 - 0.5 * sin(uCount * TAU / 30.0)); */ #snipet transform; #snipet localRotation; #snipet localScale;

mat4 m = aTransform; localRotation(m, 0.0, 1.0, 0.0, uCount*TAU/60.0); localScale(m, 1.25 * (1.0 + 0.5 * sin(uCount * TAU / 30.0)), 0.75 * (1.0 - 0.5 * sin(uCount * TAU / 30.0)), 1.0); applyTransform(position, normal, m); vColor = aColor; @fs

materialColor = vColor; `,'transform') // capは良いと思います。別にそのまあ、ですね。 const tube = Geometry3D.cylinder({details:[6,4000,6], lowerCap:'round'}); tube.addAttribute('vc', 'color3'); const points = []; for(let k=1000; k<=5000; k++){ points.push(getPos(k/4000)); } //evenlySpacing(points, {closed:false, partition:4000}); const mats = createFSS(points, {closed:false, output:'mt4'}); tube.modify((v) => { const offset = v.getValue('offset'); const index = Math.round(offset*4000); v.vc = [1, 0.5+0.5*Math.cos(500*offset*Math.PI), 0.5+0.5*Math.sin(500*offset*Math.PI)]; v.p.y -= offset; v.p.mult(0.003); mats[index].applyP(v.p); mats[index].applyN(v.n); }); const vao = tube.createVAO(gl, ` p 3; n 3; vc 3; \n f; `,` 0 p; 1 n; 2 vc; \n f; `); //const mover = Geometry3D.cube({details:[2,2,2], transform:`scale 0.012 0.024 0.0048;`}); const mover = Geometry3D.roundCuboid({details:[1,1,1,3], size:[0.02, 0.044, 0.0056], radius:0.004}); mover.addAttribute('vc', 'color3'); mover.modify((v)=>{ if(v.p.z > 0){ v.vc = 'gold'; }else{ v.vc = 'gray'; } }); const vaoMover = mover.createVAO(gl, ` p 3; n 3; vc 3; \n f; `,` 0 p; 1 n; 6 vc; \n f; `); vaoMover.setVAOLayout(` @buffer om ${64*500}; @layout 2 om 4 float false 64 0; 3 om 4 float false 64 16; 4 om 4 float false 64 32; 5 om 4 float false 64 48; 2 1; 3 1; 4 1; 5 1; `); const updateTransform = (offset) => { const transformData = []; for(let i=0; i<500; i++){ const properOffset = offset + i/500; const indexFloat = Math.pow(properOffset,0.6)*4000; const leftIndex = Math.floor(indexFloat); const rightIndex = leftIndex+1; const ratio = indexFloat-leftIndex; const leftMatrix = mats[(leftIndex%4000)]; const rightMatrix = mats[(rightIndex%4000)]; transformData.push(leftMatrix.copy().mult(1-ratio).addScalar(rightMatrix, ratio)); } vaoMover.updateVBO('om', transformData); } updateTransform(0); const r2d = Render2D.create(gl); r2d.build({ shader:{align:'center_yUp'}, layout:` @vs

# 背景に設定するときはdepthを1.0にする（常識） depth = 1.0; @fs float uCount; #snipet softLight;

float t = 6.28318*uCount/400.0; color.rgb = softLight(vec3(0.75, 0.5+0.25*sin(t), 0.5+0.25*cos(t)), 0.5*vec3(1.5-length(uv))); ` }); let properFrameCount = 0; draw = () => { // 本家 //rotateX(PI / 4 + (PI / 8) * sin(count * TAU / 600)); //rotateZ(count * TAU / 1200); updateTransform(properFrameCount/20000); l3d.model().setRotation(0,1,0,properFrameCount*Math.PI*2/1200).localRotation(1, 0, 0, Math.PI/4 + (Math.PI/8)*Math.sin(properFrameCount*Math.PI*2/600)); gl.clearColor(0,0,0,0);gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); r2d.useProgram(); r2d.setUniform('uCount', properFrameCount); r2d.render(); cs.update(); l3d.useProgram(); l3d.setMatrices(); l3d.setLights(); vao.bind().drawElements('triangles').unbind(); l3d.useProgram('transform'); l3d.setUniform('uCount', properFrameCount); l3d.setMatrices(); l3d.setLights(); vaoMover.bind().drawElements('triangles', {count:500}).unbind(); gl.flush(); properFrameCount++; } }

goldenSpiral (remake)