webgl square
HTML
<body style='padding:0;margin:0;overflow:hidden;font-size:3vw'>
<canvas id="glcanvas" width="640" height="480">
Your browser doesn't appear to support the
<code><canvas></code> element.
</canvas>
</body>
JavaScript
"use strict"
var gl;
var g = {}
//
// gluPerspective
//
function makePerspective(fovy, aspect, znear, zfar)
{
var ymax = znear * Math.tan(fovy * Math.PI / 360.0);
var ymin = -ymax;
var xmin = ymin * aspect;
var xmax = ymax * aspect;
return makeFrustum(xmin, xmax, ymin, ymax, znear, zfar);
}
//
// glFrustum
//
function makeFrustum(left, right, bottom, top, znear, zfar)
{
var X = 2*znear/(right-left);
var Y = 2*znear/(top-bottom);
var A = (right+left)/(right-left);
var B = (top+bottom)/(top-bottom);
var C = -(zfar+znear)/(zfar-znear);
var D = -2*zfar*znear/(zfar-znear);
return [
[X, 0, A, 0],
[0, Y, B, 0],
[0, 0, C, D],
[0, 0, -1, 0]
];
}
//
// initShaders
//
// Initialize the shaders, so WebGL knows how to light our scene.
//
g.initShaders = function()
{
g.shaderProgram = gl.createProgram();
g.makeShader(gl.FRAGMENT_SHADER, `
void main(void) {
gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
}
`);
g.makeShader(gl.VERTEX_SHADER, `
attribute vec3 aVertexPosition;
uniform mat4 uMVMatrix;
uniform mat4 uPMatrix;
void main(void) {
gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
}
`);
// If creating the shader program failed, alert
gl.linkProgram(g.shaderProgram);
if (!gl.getProgramParameter(g.shaderProgram, gl.LINK_STATUS)) {
alert("Unable to initialize the shader program: " + gl.getProgramInfoLog(shader));
}
gl.useProgram(g.shaderProgram);
g.vertexPositionAttribute = gl.getAttribLocation(g.shaderProgram, "aVertexPosition");
gl.enableVertexAttribArray(g.vertexPositionAttribute);
}
g.makeShader = function(type, code)
{
var shader = gl.createShader(type);
// Send the source to the shader object
gl.shaderSource(shader, code);
// Compile the shader program
gl.compileShader(shader);
// See if it compiled successfully
if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
{
alert("An error occurred compiling the shaders: " + gl.getShaderInfoLog(shader));
return...