郑州网站权重,湖州网站建设服务,上海纯设计公司,网站头部样式本文罗列几个WebGL入门例子#xff0c;用于帮助WebGL学习。
一、概述
WebGL (Web Graphics Library)是一组基于Open ES、在Web内渲染3D图形的Javascript APIs。 Ref. from Khronos Group: WebGL WebGL™ is a cross-platform, royalty-free open web standard for a low-lev…本文罗列几个WebGL入门例子用于帮助WebGL学习。
一、概述
WebGL (Web Graphics Library)是一组基于Open ES、在Web内渲染3D图形的Javascript APIs。 Ref. from Khronos Group: WebGL WebGL™ is a cross-platform, royalty-free open web standard for a low-level 3D graphics API based on OpenGL ES, exposed to ECMAScript via the HTML5 Canvas element. 二、配置WebGL开发环境 三、例子1绘制三角形
!DOCTYPE HTML
html langenheadtitleDraw a triangle/titlemeta charsetutf-8script typetext/javascriptvar gl;var canvas;var shaderProgram;var vertexBuffer;function createGLContext(canvas){var names [webgl, experimental-webgl];var context null;for(var i 0; i names.length; i){try{context canvas.getContext(names[i]);}catch(e){if (context){break;}}}if(context){context.viewportWidth canvas.width;context.viewportHeight canvas.height;}else{alert(Failed to create WebGL context!);}return context;}function loadShader(type, shaderSource){var shader gl.createShader(type);gl.shaderSource(shader, shaderSource);gl.compileShader(shader);if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)){alert(Error compiling shader gl.getShaderInfoLog(shader));gl.deleteShader(shader);return null}return shader;}function setupShaders(){var vertexShaderSource attribute vec3 aVertexPosition; \n void main() \n { \n gl_Position vec4(aVertexPosition, 1.0); \n } \n;var fragmentShaderSource precision mediump float; \n void main() \n { \n gl_FragColor vec4(1.0, 1.0, 1.0, 1.0); \n } \n;var vertexShader loadShader(gl.VERTEX_SHADER, vertexShaderSource);var fragmentShader loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);shaderProgram gl.createProgram();gl.attachShader(shaderProgram, vertexShader);gl.attachShader(shaderProgram, fragmentShader);gl.linkProgram(shaderProgram);if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)){alert(Failed to setup shaders!);}gl.useProgram(shaderProgram);shaderProgram.vertexPositionAttribute gl.getAttribLocation(shaderProgram, aVertexPosition);}function setupBuffers(){vertexBuffer gl.createBuffer();gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);var triangleVertices [0.0, 0.5, 0.0,-0.5, -0.5, 0.0,0.5, -0.5, 0.0];gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);vertexBuffer.itemSize 3;vertexBuffer.numberOfItems 3;}function draw(){gl.viewport(0,0, gl.viewportWidth, gl.viewportHeight);gl.clear(gl.COLOR_BUFFER_BIT);gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);}function startup(){canvas document.getElementById(myGLCanvas);gl createGLContext(canvas);setupShaders();setupBuffers();gl.clearColor(0.0,0.0,0.0,1.0);draw();}/script/headbody onloadstartup();canvas idmyGLCanvas width500 height500/canvas/body
/html 参考资料
Andreas Anyuru. Professional WebGL Programming: Developing 3D Graphics for the Web.
Kouichi Matsuda, Rodger Lea. WebGL Programming Guide: Interactive 3D Graphics Programming with WebGL.
网络资料
WebGLhttps://www.khronos.org/webgl/
WebGL 2.0 Specificationhttps://registry.khronos.org/webgl/specs/latest/2.0/
Three.jshttps://threejs.org/
BabylonJShttps://www.babylonjs.com/
