Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- var cubeRotation = 0.0;
- main();
- function main() {
- const canvas = document.querySelector('#glcanvas');
- const gl = canvas.getContext('webgl');
- // If we don't have a GL context, give up now
- if (!gl) {
- alert('Unable to initialize WebGL. Your browser or machine may not support it.');
- return;
- }
- // Vertex shader program
- const vsSource = `
- attribute vec4 aVertexPosition;
- attribute vec4 aVertexColor;
- uniform mat4 uModelViewMatrix;
- uniform mat4 uProjectionMatrix;
- varying lowp vec4 vColor;
- void main(void) {
- gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
- vColor = aVertexColor;
- }
- `;
- // Fragment shader program
- const fsSource = `
- varying lowp vec4 vColor;
- void main(void) {
- gl_FragColor = vColor;
- }
- `;
- // Initialize a shader program; this is where all the lighting
- // for the vertices and so forth is established.
- const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
- // Collect all the info needed to use the shader program.
- // Look up which attributes our shader program is using
- // for aVertexPosition, aVevrtexColor and also
- // look up uniform locations.
- const programInfo = {
- program: shaderProgram,
- attribLocations: {
- vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
- vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
- },
- uniformLocations: {
- projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
- modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
- },
- };
- // Here's where we call the routine that builds all the
- // objects we'll be drawing.
- const buffers = initBuffers(gl);
- var then = 0;
- // Draw the scene repeatedly
- function render(now) {
- now *= 0.001; // convert to seconds
- const deltaTime = now - then;
- then = now;
- drawScene(gl, programInfo, buffers, deltaTime);
- requestAnimationFrame(render);
- }
- requestAnimationFrame(render);
- }
- var mvMatrix = mat4.create();
- var mvMatrixStack = [];
- var pMatrix = mat4.create();
- function mvPushMatrix() {
- var copy = mat4.create();
- mat4.set(mvMatrix, copy);
- mvMatrixStack.push(copy);
- }
- function mvPopMatrix() {
- if (mvMatrixStack.length == 0) {
- throw "Invalid popMatrix!";
- }
- mvMatrix = mvMatrixStack.pop();
- }
- function setMatrixUniforms() {
- gl.uniformMatrix4fv(shaderProgram.pMatrixUniform, false, pMatrix);
- gl.uniformMatrix4fv(shaderProgram.mvMatrixUniform, false, mvMatrix);
- }
- function degToRad(degrees) {
- return degrees * Math.PI / 180;
- }
- //
- // initBuffers
- //
- // Initialize the buffers we'll need. For this demo, we just
- // have one object -- a simple three-dimensional cube.
- //
- function initBuffers(gl) {
- //Head Cube
- const headPositionBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ARRAY_BUFFER, headPositionBuffer);
- const positions = [
- // Front face
- -1.0, -1.0, 1.0,
- 1.0, -1.0, 1.0,
- 1.0, 1.0, 1.0,
- -1.0, 1.0, 1.0,
- // Back face
- -1.0, -1.0, -1.0,
- -1.0, 1.0, -1.0,
- 1.0, 1.0, -1.0,
- 1.0, -1.0, -1.0,
- // Top face
- -1.0, 1.0, -1.0,
- -1.0, 1.0, 1.0,
- 1.0, 1.0, 1.0,
- 1.0, 1.0, -1.0,
- // Bottom face
- -1.0, -1.0, -1.0,
- 1.0, -1.0, -1.0,
- 1.0, -1.0, 1.0,
- -1.0, -1.0, 1.0,
- // Right face
- 1.0, -1.0, -1.0,
- 1.0, 1.0, -1.0,
- 1.0, 1.0, 1.0,
- 1.0, -1.0, 1.0,
- // Left face
- -1.0, -1.0, -1.0,
- -1.0, -1.0, 1.0,
- -1.0, 1.0, 1.0,
- -1.0, 1.0, -1.0,
- ];
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);
- const headFaceColors = [
- [1.0, 1.0, 1.0, 1.0], // Front face: white
- [1.0, 0.0, 0.0, 1.0], // Back face: red
- [0.0, 1.0, 0.0, 1.0], // Top face: green
- [0.0, 0.0, 1.0, 1.0], // Bottom face: blue
- [1.0, 1.0, 0.0, 1.0], // Right face: yellow
- [1.0, 0.0, 1.0, 1.0], // Left face: purple
- ];
- colors = [];
- for (var j = 0; j < headFaceColors.length; ++j) {
- const c = headFaceColors[j];
- colors = colors.concat(c, c, c, c);
- }
- const headColorBuffer = gl.createBuffer();
- headColorBuffer.itemSize = 4;
- headColorBuffer.numItems = 24;
- gl.bindBuffer(gl.ARRAY_BUFFER, headColorBuffer);
- gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
- const headIndexBuffer = gl.createBuffer();
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, headIndexBuffer);
- var headIndices = [
- 0, 1, 2, 0, 2, 3, // front
- 4, 5, 6, 4, 6, 7, // back
- 8, 9, 10, 8, 10, 11, // top
- 12, 13, 14, 12, 14, 15, // bottom
- 16, 17, 18, 16, 18, 19, // right
- 20, 21, 22, 20, 22, 23, // left
- ];
- gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
- new Uint16Array(headIndices), gl.STATIC_DRAW);
- indexBuffer.itemSize = 1;
- indexBuffer.numItems = 36;
- return;
- }
- function headCube()
- {
- mat4.translate(mvMatrix, [-0.3, -0.2, -0.5]); // CUBE1 CONTROL POSITION
- mvPushMatrix();
- }
- function headCubeBuffer(){
- gl.bindBuffer(gl.ARRAY_BUFFER, headPositionBuffer);
- gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, headPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
- gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
- gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, headColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, headIndexBuffer);
- setMatrixUniforms();
- gl.drawElements(gl.TRIANGLES, headIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
- mvPopMatrix();
- }
- //
- // Draw the scene.
- //
- function drawScene(gl, programInfo, buffers, deltaTime) {
- gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
- gl.clearDepth(1.0); // Clear everything
- gl.enable(gl.DEPTH_TEST); // Enable depth testing
- gl.depthFunc(gl.LEQUAL); // Near things obscure far things
- // Clear the canvas before we start drawing on it.
- gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
- // Create a perspective matrix, a special matrix that is
- // used to simulate the distortion of perspective in a camera.
- // Our field of view is 45 degrees, with a width/height
- // ratio that matches the display size of the canvas
- // and we only want to see objects between 0.1 units
- // and 100 units away from the camera.
- const fieldOfView = 45 * Math.PI / 180; // in radians
- const aspect = gl.canvas.clientWidth / gl.canvas.clientHeight;
- const zNear = 0.1;
- const zFar = 100.0;
- const projectionMatrix = mat4.create();
- // note: glmatrix.js always has the first argument
- // as the destination to receive the result.
- mat4.perspective(projectionMatrix,
- fieldOfView,
- aspect,
- zNear,
- zFar);
- mat4.identity(mvMatrix);
- // Set the drawing position to the "identity" point, which is
- // the center of the scene.
- const modelViewMatrix = mat4.create();
- // Now move the drawing position a bit to where we want to
- // start drawing the square.
- mat4.translate(modelViewMatrix, // destination matrix
- modelViewMatrix, // matrix to translate
- [-0.0, 0.0, -6.0]); // amount to translate
- mat4.rotate(modelViewMatrix, // destination matrix
- modelViewMatrix, // matrix to rotate
- cubeRotation, // amount to rotate in radians
- [0, 0, 0]); // axis to rotate around (Z)
- mat4.rotate(modelViewMatrix, // destination matrix
- modelViewMatrix, // matrix to rotate
- cubeRotation * .7,// amount to rotate in radians
- [0, 1, 0]); // axis to rotate around (X)
- // Tell WebGL how to pull out the positions from the position
- // buffer into the vertexPosition attribute
- {
- const numComponents = 3;
- const type = gl.FLOAT;
- const normalize = false;
- const stride = 0;
- const offset = 0;
- gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
- gl.vertexAttribPointer(
- programInfo.attribLocations.vertexPosition,
- numComponents,
- type,
- normalize,
- stride,
- offset);
- gl.enableVertexAttribArray(
- programInfo.attribLocations.vertexPosition);
- }
- // Tell WebGL how to pull out the colors from the color buffer
- // into the vertexColor attribute.
- {
- const numComponents = 4;
- const type = gl.FLOAT;
- const normalize = false;
- const stride = 0;
- const offset = 0;
- gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
- gl.vertexAttribPointer(
- programInfo.attribLocations.vertexColor,
- numComponents,
- type,
- normalize,
- stride,
- offset);
- gl.enableVertexAttribArray(
- programInfo.attribLocations.vertexColor);
- }
- // Tell WebGL which indices to use to index the vertices
- gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
- // Tell WebGL to use our program when drawing
- gl.useProgram(programInfo.program);
- // Set the shader uniforms
- gl.uniformMatrix4fv(
- programInfo.uniformLocations.projectionMatrix,
- false,
- projectionMatrix);
- gl.uniformMatrix4fv(
- programInfo.uniformLocations.modelViewMatrix,
- false,
- modelViewMatrix);
- {
- const vertexCount = 36;
- const type = gl.UNSIGNED_SHORT;
- const offset = 0;
- gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
- }
- // Update the rotation for the next draw
- //cubeRotation += deltaTime;
- }
- //
- // Initialize a shader program, so WebGL knows how to draw our data
- //
- function initShaderProgram(gl, vsSource, fsSource) {
- const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
- const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
- // Create the shader program
- const shaderProgram = gl.createProgram();
- gl.attachShader(shaderProgram, vertexShader);
- gl.attachShader(shaderProgram, fragmentShader);
- gl.linkProgram(shaderProgram);
- // If creating the shader program failed, alert
- if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
- alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
- return null;
- }
- return shaderProgram;
- }
- //
- // creates a shader of the given type, uploads the source and
- // compiles it.
- //
- function loadShader(gl, type, source) {
- const shader = gl.createShader(type);
- // Send the source to the shader object
- gl.shaderSource(shader, source);
- // 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));
- gl.deleteShader(shader);
- return null;
- }
- return shader;
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement