In css, I can use perspective + matrix3d to achieve the perspective effect of 3d transformation.
For example:
transform: perspective(500px) rotateY(45deg);
it equals to
matrix3d(0.707107, 0, -0.707107, 0.00141421, 0, 1, 0, 0, 0.707107, 0, 0.707107, -0.00141421, 0, 0, 0, 1)
<div style="display:inline-block;background: linear-gradient(#F00, #00F);width:100px;height:100px;transform:perspective(300px)rotateY(45deg)"></div>
<div style="display:inline-block;background: linear-gradient(#F00, #00F);width:100px;height:100px;transform:matrix3d(0.707107, 0, -0.707107, 0.00141421, 0, 1, 0, 0, 0.707107, 0, 0.707107, -0.00141421, 0, 0, 0, 1)"></div>Also using this matrix in webgl, a rectangle (2 triangles) is rendered, but without the effect of perspective.
function initShaders(gl, vshader, fshader) {
let program = createProgram(gl, vshader, fshader);
if (!program) {
return false;
}
gl.useProgram(program);
gl.program = program;
return true;
}
function createProgram(gl, vshader, fshader) {
let vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
let fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
if (!vertexShader || !fragmentShader) {
return null;
}
let program = gl.createProgram();
if (!program) {
return null;
}
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
let linked = gl.getProgramParameter(program, gl.LINK_STATUS);
if (!linked) {
let error = gl.getProgramInfoLog(program);
gl.deleteProgram(program);
gl.deleteShader(fragmentShader);
gl.deleteShader(vertexShader);
return null;
}
return program;
}
function loadShader(gl, type, source) {
let shader = gl.createShader(type);
if (shader == null) {
return null;
}
gl.shaderSource(shader, source);
gl.compileShader(shader);
let compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
if (!compiled) {
let error = gl.getShaderInfoLog(shader);
console.error('Failed to compile shader: ' + error);
gl.deleteShader(shader);
return null;
}
return shader;
}
let canvas = document.querySelector('#canvas');
let gl = canvas.getContext('webgl');
gl.clearColor(0.0, 0.0, 0.0, 0.0);
gl.clear(gl.COLOR_BUFFER_BIT);
let vSource = `attribute vec4 a_position;
attribute vec4 a_color;
varying vec4 v_color;
uniform mat4 u_matrix;
void main() {
gl_Position = u_matrix * a_position;
v_color = a_color;
}`;
let fSource = `precision mediump float;
varying vec4 v_color;
void main() {
gl_FragColor = v_color;
}`;
if (!initShaders(gl, vSource, fSource)) {
console.error('init error');
}
let pointBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, pointBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
-0.5, -0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, -0.5,
-0.5, 0.5,
0.5, 0.5,
]), gl.STATIC_DRAW);
let a_position = gl.getAttribLocation(gl.program, 'a_position');
gl.vertexAttribPointer(a_position, 2, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_position);
let colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([
0, 0, 1, 1,
0, 0, 1, 1,
1, 0, 0, 1,
0, 0, 1, 1,
1, 0, 0, 1,
1, 0, 0, 1,
]), gl.STATIC_DRAW);
let a_color = gl.getAttribLocation(gl.program, 'a_color');
gl.vertexAttribPointer(a_color, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(a_color);
let u_matrix = gl.getUniformLocation(gl.program, 'u_matrix');
// same matrix as css above
gl.uniformMatrix4fv(u_matrix, false, new Float32Array([
0.707107, 0, -0.707107, 0.00141421, 0, 1, 0, 0, 0.707107, 0, 0.707107, -0.00141421, 0, 0, 0, 1
]));
gl.drawArrays(gl.TRIANGLES, 0, 6);<canvas id="canvas" style="height: 200px;width: 200px"></canvas>How should I get a matrix in webgl that has the equivalent effect as the css transform matrix?
Lastly, I should note that I have already read WebGL 3D Perspective, but after all of that, I still confused about this question.