01 最簡單的WebGL程序
阿新 • • 發佈：2017-06-08
rime oid start head mpi attr meta creat .sh
我們新建一個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 varcanvas = 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程序