[关闭]
@zjlbr2003 2014-06-16T03:01:56.000000Z 字数 2591 阅读 1799

WebGL Hello World Triangle Test

Blog

  2. <!DOCTYPE HTML>
  3. <html lang="en">
  4.     <head>
  5.         <title>Hello World WebGL</title>
  6.         <meta charset="utf-8">
  7.         <script type="text/javascript">
  8.             var gl;
  9.             var canvas;
  10.             var shaderProgram;
  11.             var vertexBuffer;
  13.             function createGLContext(canvas)
  14.             {
  15.                 var names = ["webgl", "experimental-webgl"];
  16.                 var context = null;
  17.                 for(var i = 0; i < names.length; ++i)
  18.                 {
  19.                     try
  20.                     {
  21.                         context = canvas.getContext(names[i]);
  22.                     }
  23.                     catch(e)
  24.                     {
  25.                     }
  26.                     if(context) break;
  27.                 }
  29.                 if(context)
  30.                 {
  31.                     context.viewportWidth = canvas.width;
  32.                     context.viewportHeight = canvas.height;
  33.                 }
  34.                 else
  35.                 {
  36.                     alert("Failed to create WebGL context");
  37.                 }
  39.                 return context;
  40.             }
  42.             function loadShader(type, shaderSource)
  43.             {
  44.                 var shader = gl.createShader(type);
  45.                 gl.shaderSource(shader, shaderSource);
  46.                 gl.compileShader(shader);
  48.                 if(!gl.getShaderParameter(shader, gl.COMPILE_STATUS))
  49.                 {
  50.                     alert("Error compiling shader" + gl.getShaderInfoLog(shader));
  51.                     gl.deleteShader(shader);
  52.                     return null;
  53.                 }
  55.                 return shader;
  56.             }
  58.             function setupShaders()
  59.             {
  60.                 var vertexShaderSource = 
  61.                     "attribute vec3 aVertexPosition;                    \n" +
  62.                     "void main() {                                      \n" +
  63.                     "   gl_Position = vec4(aVertexPosition, 1.0);       \n" +
  64.                     "}                                                  \n";
  66.                 var fragmentShaderSource = 
  67.                     "precision mediump float;                           \n" +
  68.                     "void main() {                                      \n" +
  69.                     "   gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);        \n" +
  70.                     "}                                                  \n";
  72.                 var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
  73.                 var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
  75.                 shaderProgram = gl.createProgram();
  76.                 gl.attachShader(shaderProgram, vertexShader);
  77.                 gl.attachShader(shaderProgram, fragmentShader);
  78.                 gl.linkProgram(shaderProgram);
  80.                 if(!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS))
  81.                 {
  82.                     alert("Failed to setup shaders");
  83.                 }
  85.                 gl.useProgram(shaderProgram);
  87.                 shaderProgram.vertexPositionAttribute = gl.getAttribLocation(shaderProgram, "aVertexPosition");
  88.             }
  90.             function setupBuffers()
  91.             {
  92.                 vertexBuffer = gl.createBuffer();
  93.                 gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
  94.                 var triangleVertices = 
  95.                 [
  96.                     0.0, 0.5, 0.0,
  97.                     -0.5,-0.5,0.0,
  98.                     0.5,-0.5,0.0
  99.                 ];
  100.                 gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);
  101.                 vertexBuffer.itemSize = 3;
  102.                 vertexBuffer.numberOfItems = 3;
  103.             }
  105.             function draw()
  106.             {
  107.                 gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
  108.                 gl.clear(gl.COLOR_BUFFER_BIT);
  110.                 gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, vertexBuffer.itemSize, gl.FLOAT, false, 0, 0);
  112.                 gl.enableVertexAttribArray(shaderProgram.vertexPositionAttribute);
  114.                 gl.drawArrays(gl.TRIANGLES, 0, vertexBuffer.numberOfItems);
  115.             }
  117.             function startup()
  118.             {
  119.                 canvas = document.getElementById("myGLCanvas");
  120.                 gl = createGLContext(canvas);
  121.                 setupShaders();
  122.                 setupBuffers();
  123.                 gl.clearColor(0.0, 0.0, 0.0, 1.0);
  124.                 draw();
  125.             }
  126.         </script>
  127.     </head>
  129.     <body onload = "startup();">
  130.         <canvas id = "myGLCanvas" width = "500" height = "500">Sorry, your web browser does not support WebGL</canvas>
  131.     </body>
  133. </html>

该WebGL代码在博客首页页脚部分测试通过，请使用Chrome/Firefox/Safari等浏览器查看正确显示效果。

期待使用WebGL技术在博客中向大家展示更多本组的工作成果，谢谢。

添加新批注
在作者公开此批注前，只有你和作者可见。
回复批注