01 最简单的WebGL程序
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了01 最简单的WebGL程序相关的知识，希望对你有一定的参考价值。
我们新建一个html页面，将下面的代码复制粘贴到里面，一个最简单的WebGL程序就写好了。借助这一个程序，大家可以尝试改变各个值的大小，了解一下WebGL各个坐标值的方向和坐标值的大小。从下一节开始，我们利用最简单的程序，继续介绍WebGL的相关知识。
1 <!DOCTYPE html> 2 3 <html lang="zh-CN"> 4 5 <head> 6 <meta charset="UTF-8" /> 7 <title>01_最简单的WebGL程序</title> 8 9 <!-- 顶点着色器 --> 10 <script id="shader-vs" type="x-shader/x-vertex"> 11 attribute vec3 position; 12 13 void main(void) { 14 gl_Position = vec4(position, 1.0); 15 } 16 </script> 17 18 <!-- 片源着色器 --> 19 <script id="shader-fs" type="x-shader/x-fragment"> 20 precision mediump float; 21 22 void main(void) { 23 gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); 24 } 25 </script> 26 27 <script type="text/javascript"> 28 var start = function () { 29 // 上下文环境 30 var canvas = document.getElementById("mycanvas"); 31 var gl = canvas.getContext("experimental-webgl"); 32 gl.viewportWidth = canvas.width; 33 gl.viewportHeight = canvas.height; 34 gl.viewport(0, 0, gl.viewportWidth, gl.viewportWidth); 35 gl.clearColor(0.0, 0.0, 0.0, 1.0); 36 gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT); 37 gl.enable(gl.DEPTH_TEST); 38 39 // 顶点着色器 40 var shader = gl.createShader(gl.VERTEX_SHADER); 41 gl.shaderSource(shader, document.getElementById(‘shader-vs‘).innerHTML); 42 gl.compileShader(shader); 43 var vertexShader = shader; 44 45 // 片源着色器 46 var shader = gl.createShader(gl.FRAGMENT_SHADER); 47 gl.shaderSource(shader, document.getElementById(‘shader-fs‘).innerHTML); 48 gl.compileShader(shader); 49 var fragmentShader = shader; 50 51 // 着色器程序 52 var shaderProgram = gl.createProgram(); 53 gl.attachShader(shaderProgram, vertexShader); 54 gl.attachShader(shaderProgram, fragmentShader); 55 gl.linkProgram(shaderProgram); 56 gl.useProgram(shaderProgram); 57 58 // 缓存 59 var buffer = gl.createBuffer(); 60 gl.bindBuffer(gl.ARRAY_BUFFER, buffer); 61 62 // 顶点 63 var vertices = [ 64 -0.5, 0.0, 0.0, 65 0.5, 0.0, 0.0, 66 0.0, 0.5, 0.0 67 ]; 68 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW); 69 70 var position = gl.getAttribLocation(shaderProgram, "position"); 71 gl.enableVertexAttribArray(position); 72 gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); 73 74 // 绘制 75 gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4); 76 } 77 </script> 78 </head> 79 80 <body onload="start();"> 81 <canvas id="mycanvas" style="border: none;" width="500" height="500"></canvas> 82 </body> 83 84 </html>
效果图如下：
以上是关于01 最简单的WebGL程序的主要内容，如果未能解决你的问题，请参考以下文章