WebGL畫點程序v2

時間 2019-11-12

標籤 webgl 程序 v2 简体版

原文原文鏈接

本文程序實現畫一個點的任務，以下圖。其中，點的位置座標由Javascript傳到着色器程序中，而不是直接給定（「硬編碼」）在頂點着色器中。javascript

整個程序包含兩個文件，分別是：html

1. HelloPoint2.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>畫一個點</title>
    </head>
    <body onload="startup()">
        <canvas id="myGLCanvas" width="640" height="480">
        </canvas>
    </body>
    <script type="text/javascript" src="HelloPoint2.js">
    </script>
</html>

2. HelloPoint2.js

var gl;
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]); //獲取webgl context繪圖上下文
    } 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 vec4 a_Position;\n' + // attribute variable
      'void main() {\n' +
      '  gl_Position = a_Position;\n' +
      '  gl_PointSize = 10.0;\n' +
      '}\n'; 
    
    //片元着色器程序
    var fragmentShaderSource = 
      'void main(){ \n' +
      '    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); \n' + //gl_FragColor指定像素的顏色
      '} \n';                                         
     
  var vertexShader = loadShader(gl.VERTEX_SHADER, vertexShaderSource);
  var fragmentShader = loadShader(gl.FRAGMENT_SHADER, fragmentShaderSource);
  
  var 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);
  gl.program= shaderProgram;
}

function startup(){
    var canvas = document.getElementById('myGLCanvas');//獲取<canvas>元素
    gl = createGLContext(canvas);
    setupShaders(); 

    // Get the storage location of a_Position
    var a_PosLocation = gl.getAttribLocation(gl.program, 'a_Position');
    if (a_PosLocation < 0) {
      console.log('Failed to get the storage location of a_Position');
      return;
    }

    // Pass vertex position to attribute variable
    gl.vertexAttrib3f(a_PosLocation, 0.0, 0.0, 0.0);

    gl.clearColor(0.0, 0.0, 0.0, 1.0);//指定清空<canvas>的顏色    
    gl.clear(gl.COLOR_BUFFER_BIT);//清空<canvas>
    gl.drawArrays(gl.POINTS, 0, 1);//從第0個元素開始，在指定位置（gl_Position）畫1個點
 }

參考代碼

Hello Point——WebGL, http://www.cnblogs.com/idealer3d/p/3513838.html
Professional WebGL Programming: Developing 3D Graphics for the Web,Listing 2-1,http://media.wiley.com/product_ancillary/60/11199688/DOWNLOAD/Listing-2-1.html
WebGL Programming Guide, https://sites.google.com/site/webglbook/

轉載請註明出處：http://www.cnblogs.com/opengl/p/7269809.htmljava

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。