+/* globals window document mat4 */
+
const internals = {
// Constants
kEntrypointElementId: 'entrypoint', // The id of the canvas element where we will render
kWidthRatio: 2.76,
kHeightRatio: 1,
- kTargetVerticalResolution: 32,
+ kTargetVerticalResolution: 32 + Math.round(Math.random() * 1024),
kFieldOfView: 45,
kNearLimit: 0.1,
kFarLimit: 100,
const canvas = internals.initializeCanvas();
- const {gl, programInfo, buffers} = internals.initializeWebGL(canvas);
+ const { gl, programInfo, buffers } = internals.initializeWebGL(canvas);
window.requestAnimationFrame(internals.animate.bind(this, gl, programInfo, buffers));
},
const buffers = internals.initializeBuffers(gl);
- return { gl, programInfo, buffers};
+ return { gl, programInfo, buffers };
},
// Methods: Canvas
canvas.style.height = `${height}px`;
canvas.width = internals.kTargetVerticalResolution * internals.kWidthRatio;
- canvas.height = internals.kTargetVerticalResolution;
-
- canvas.width = width;
- canvas.height = height;
+ canvas.height = internals.kTargetVerticalResolution;
},
// Methods: Shader / GL Related
gl.linkProgram(shaderProgram);
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
- alert(`Unable to initialize shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
+ console.error(`Unable to initialize shader program: ${gl.getProgramInfoLog(shaderProgram)}`);
return null;
}
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
- alert(`Unable to compile shader: ${gl.getShaderInfoLog(shader)}`);
+ console.error(`Unable to compile shader: ${gl.getShaderInfoLog(shader)}`);
gl.deleteShader(shader);
return null;
}
];
gl.bufferData(gl.ARRAY_BUFFER,
- new Float32Array(positions),
- gl.STATIC_DRAW);
+ new Float32Array(positions),
+ gl.STATIC_DRAW);
return {
position: positionBuffer
- }
+ };
},
// Methods: Utility
const matrix = mat4.create();
mat4.translate(
- matrix,
- matrix,
- [-0.0, 0.0, -6.0]
+ matrix,
+ matrix,
+ [-0.0, 0.0, -6.0]
);
return matrix;
const projectionMatrix = mat4.create();
mat4.perspective(
- projectionMatrix,
- fieldOfView,
- aspectRatio,
- internals.kNearLimit,
- internals.kFarLimit
+ projectionMatrix,
+ fieldOfView,
+ aspectRatio,
+ internals.kNearLimit,
+ internals.kFarLimit
);
internals.modelViewMatrix = internals.modelViewMatrix || internals.createMatrix();
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
- programInfo.attribLocations.vertexPosition,
- numberOfComponents,
- type,
- normalize,
- stride,
- offset
+ programInfo.attribLocations.vertexPosition,
+ numberOfComponents,
+ type,
+ normalize,
+ stride,
+ offset
);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexPosition);
}
];
gl.bufferData(gl.ARRAY_BUFFER,
- new Float32Array(colors),
- gl.STATIC_DRAW);
+ new Float32Array(colors),
+ gl.STATIC_DRAW);
const numberOfComponents = 4;
const type = gl.FLOAT;
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.vertexAttribPointer(
- programInfo.attribLocations.vertexColor,
- numberOfComponents,
- type,
- normalize,
- stride,
- offset
+ programInfo.attribLocations.vertexColor,
+ numberOfComponents,
+ type,
+ normalize,
+ stride,
+ offset
);
gl.enableVertexAttribArray(programInfo.attribLocations.vertexColor);
gl.useProgram(programInfo.program);
gl.uniformMatrix4fv(
- programInfo.uniformLocations.projectionMatrix,
- false,
- projectionMatrix
+ programInfo.uniformLocations.projectionMatrix,
+ false,
+ projectionMatrix
);
gl.uniformMatrix4fv(
- programInfo.uniformLocations.modelViewMatrix,
- false,
- internals.modelViewMatrix
+ programInfo.uniformLocations.modelViewMatrix,
+ false,
+ internals.modelViewMatrix
);
{