Мстислав Живодков
Преобразовывает координаты вершин
Преобразовывает цвет пикселей
var canvas = document.createElement('canvas');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
document.body.appendChild(canvas);
var gl = canvas.getContext('webgl');
gl.viewport(0, 0, window.innerWidth,
window.innerHeight);
[ [-1, -1], [1, -1], [-1, 1] ]
[ [1, 1], [-1, 1], [1, -1] ]
->[ [-1, -1, -1], [1, -1, -1], [-1, 1, -1] ]
[ [1, 1, -1], [-1, 1, -1], [1, -1, -1] ]
[-1, -1, -1, 1, -1, -1, -1, 1, -1, 1, 1, -1, -1, 1, -1, 1, -1, -1]
[ -1, -1, -1, 1, -1, -1, -1, -1, 1, 1, -1, 1, -1, -1, 1, 1, -1, -1,
-1, 1, -1, -1, 1, 1, 1, 1, -1, 1, 1, 1, 1, 1, -1, -1, 1, 1,
-1, -1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, 1, -1, -1, -1, 1, -1,
-1, -1, 1, 1, -1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, 1, -1, 1,
-1, -1, -1, -1, -1, 1, -1, 1, -1, -1, 1, 1, -1, 1, -1, -1, -1, 1,
1, -1, -1, 1, 1, -1, 1, -1, 1, 1, 1, 1, 1, -1, 1, 1, 1, -1 ]
var positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(vertices), gl.STATIC_DRAW);
[ [255, 128, 128], [255, 128, 128], [255, 128, 128] ]
[ [255, 128, 128], [255, 128, 128], [255, 128, 128] ]
[ 255, 128, 128, 255, 128, 128, 255, 128, 128, 255, 128, 128, 255, 128, 128, 255, 128, 128,
255, 128, 128, 255, 128, 128, 255, 128, 128, 255, 128, 128, 255, 128, 128, 255, 128, 128,
128, 179, 255, 128, 179, 255, 128, 179, 255, 128, 179, 255, 128, 179, 255, 128, 179, 255,
128, 179, 255, 128, 179, 255, 128, 179, 255, 128, 179, 255, 128, 179, 255, 128, 179, 255,
85, 255, 85, 85, 255, 85, 85, 255, 85, 85, 255, 85, 85, 255, 85, 85, 255, 85,
85, 255, 85, 85, 255, 85, 85, 255, 85, 85, 255, 85, 85, 255, 85, 85, 255, 85 ]
colors = colors.map(function(t) { return t / 255; });
var colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER,
new Float32Array(colors), gl.STATIC_DRAW);
var pMatrix = mat4.create();
mat4.perspective(pMatrix, 45,
window.innerWidth / window.innerHeight,
0.1, 1000);
mat4.translate(pMatrix, pMatrix,
[0, 0, -5]);
attribute vec3 position;
attribute vec3 color;
uniform mat4 pMatrix;
uniform mat4 mvMatrix;
varying vec3 v_color;
void main(void) {
v_color = color;
gl_Position = pMatrix * mvMatrix * vec4(position, 1.0);
}
precision mediump float;
varying vec3 v_color;
void main(void) {
gl_FragColor = vec4(v_color.rgb, 1.0);
}
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
var fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(vertexShader,
document.getElementById('vertexShader').text);
gl.compileShader(vertexShader);
gl.shaderSource(fragmentShader,
document.getElementById('fragmentShader').text);
gl.compileShader(fragmentShader);
var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
var pMatrixUniform = gl.getUniformLocation(program, 'pMatrix');
var mvMatrixUniform = gl.getUniformLocation(program, 'mvMatrix');
var positionAttribution = gl.getAttribLocation(program, 'position');
var colorAttribution = gl.getAttribLocation(program, 'color');
requestAnimationFrame(render);
mat4.rotateY(mvMatrix, mvMatrix, dt / 1000);
mat4.rotateZ(mvMatrix, mvMatrix, dt / 1000);
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.useProgram(program);
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(positionAttribution);
gl.vertexAttribPointer(positionAttribution, 3, gl.FLOAT, false, 0, 0);
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.enableVertexAttribArray(colorAttribution);
gl.vertexAttribPointer(colorAttribution, 3, gl.FLOAT, false, 0, 0);
gl.uniformMatrix4fv(pMatrixUniform, false, pMatrix);
gl.uniformMatrix4fv(mvMatrixUniform, false, mvMatrix);
gl.drawArrays(gl.TRIANGLES, 0, 36);