webgl example1
Posted honghong
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webgl example1相关的知识，希望对你有一定的参考价值。
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>WebGL Demo</title> <link rel="stylesheet" href="../webgl.css" type="text/css"> </head> <body> <canvas id="glcanvas" width="640" height="480"></canvas> </body> </html> main(); function main() { const canvas = document.querySelector(‘#glcanvas‘); const gl = canvas.getContext(‘webgl‘); if (!gl) { alert(‘Unable to initialize WebGL. Your browser or machine may not support it.‘); return; } // 顶点着色器代码 const vsSource = ` attribute vec4 aVertexPosition; uniform mat4 uModelViewMatrix; uniform mat4 uProjectionMatrix; void main() { gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition; } `; // 版本着色器代码 const fsSource = ` void main() { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } `; // 生成着色器 const shaderProgram = initShaderProgram(gl, vsSource, fsSource); // 着色器需要的数据 const programInfo = { program: shaderProgram, attribLocations: { vertexPosition: gl.getAttribLocation(shaderProgram, ‘aVertexPosition‘), }, uniformLocations: { projectionMatrix: gl.getUniformLocation(shaderProgram, ‘uProjectionMatrix‘), modelViewMatrix: gl.getUniformLocation(shaderProgram, ‘uModelViewMatrix‘), }, }; const buffers = initBuffers(gl); drawScene(gl, programInfo, buffers); } // 初始化buff数据 function initBuffers(gl) { const positionBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer); const positions = [ 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); return { position: positionBuffer, }; }
function drawScene(gl, programInfo, buffers) { 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); // 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 // Tell WebGL how to pull out the positions from the position // buffer into the vertexPosition attribute. { const numComponents = 2; 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 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 offset = 0; const vertexCount = 4; gl.drawArrays(gl.TRIANGLE_STRIP, offset, vertexCount); } }
// 编译着色器
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; } // 编译某种类型着色器 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; }
以上是关于webgl example1的主要内容，如果未能解决你的问题，请参考以下文章