WebGL 2.0. Rotation after translation on mouse click
HTML
<canvas id="renderCanvas" width="250" height="250"></canvas>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gl-matrix/2.4.0/gl-matrix-min.js"></script>
CSS
#renderCanvas {
border: 5px solid #e0aeae;
}
JavaScript
var vertexShaderSource =
`#version 300 es
in vec2 a_Position;
uniform mat4 u_ModelMatrix;
void main()
{
gl_Position = u_ModelMatrix * vec4(a_Position, 0.0, 1.0);
}`;
var fragmentShaderSource =
`#version 300 es
precision mediump float;
uniform vec3 u_Color;
out vec4 fragColor;
void main()
{
fragColor = vec4(u_Color, 1.0);
}`;
var canvas = document.getElementById("renderCanvas");
var gl = canvas.getContext("webgl2");
var vShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vShader, vertexShaderSource);
gl.compileShader(vShader);
var fShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fShader, fragmentShaderSource);
gl.compileShader(fShader);
var program = gl.createProgram();
gl.attachShader(program, vShader);
gl.attachShader(program, fShader);
gl.linkProgram(program);
gl.useProgram(program);
var vertices = new Float32Array([
-0.5, 0.5, -0.5, -0.5, 0.5, 0.5, 0.5, -0.5
]);
var vbo = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vbo);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);
var a_Position = gl.getAttribLocation(program, "a_Position");
gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_Position);
var u_Color = gl.getUniformLocation(program, "u_Color");
gl.uniform3f(u_Color, 0.207, 0.635, 0.125);
var modelMatrix = mat4.create();
var u_ModelMatrix = gl.getUniformLocation(program, "u_ModelMatrix");
var angle = 0;
var angleStep = 10;
draw(angle);
canvas.onmousedown = function ()
{
draw(angle);
angle += angleStep;
}
function draw(angle)
{
mat4.identity(modelMatrix);
mat4.rotateZ(modelMatrix, modelMatrix, angle * Math.PI / 180);
mat4.translate(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.0, 0.0));
mat4.scale(modelMatrix, modelMatrix, vec3.fromValues(0.6, 0.6, 0.6));
gl.uniformMatrix4fv(u_ModelMatrix, false, modelMatrix);
gl.clearColor(0.894, 0.976, 0.886, 1.0);
...