<!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
原文地址：https://www.cnblogs.com/honghong87/p/8963349.html