1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90
| import vsSource from '~/index.vs'; import fsSource from '~/index.fs';
const t = arr => arr.map(x => x / 200); const createSquare = (width, height, start) => { const [x, y] = start; return [ x , y, x + width, y, x, y + height, x + width, y + height ]; };
const canvas = document.getElementById('webgl'); const gl = canvas.getContext('webgl');
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vsSource);
gl.compileShader(vertexShader);
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fsSource);
gl.compileShader(fragmentShader);
const glProgram = gl.createProgram();
gl.attachShader(glProgram, vertexShader); gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);
gl.useProgram(glProgram);
const a_Position = gl.getAttribLocation(glProgram, 'a_Position');
const a_Rotation = gl.getUniformLocation(glProgram, 'a_Rotation');
const vtxData = [ createSquare(200,30, [-100,100]), createSquare(30,200, [-100,-100]), ];
const createRotation = angleInDegrees => { let angleInRadians = (angleInDegrees * Math.PI) / 180; return [Math.sin(angleInRadians), Math.cos(angleInRadians)]; };
let start = 180;
setInterval(() => { let rotation = createRotation(start); start += 1;
gl.clear(gl.COLOR_BUFFER_BIT);
for (let i = 0; i < vtxData.length; i++) { const arrVtx = new Float32Array(t(vtxData[i]));
const vertexBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer); gl.bufferData(gl.ARRAY_BUFFER, arrVtx, gl.STATIC_DRAW); gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0); gl.enableVertexAttribArray(a_Position);
gl.uniform2fv(a_Rotation, rotation);
const a_PointSize = gl.getAttribLocation(glProgram, 'a_PointSize'); gl.vertexAttrib1f(a_PointSize, 1.0);
const u_FragColor = gl.getUniformLocation(glProgram, 'u_FragColor'); gl.uniform4f(u_FragColor, 0.0, 0.6, 0.38, 1);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); } }, 5);
|