WebGL（5） -- 多边形

时间：2016-02-04 19:02:24 阅读：500 评论：0 收藏：0 [点我收藏+]

标签：

本文参考《WebGL编程指南》

　　利用上一章的知识，画出以下多个点：

源码：

技术分享

test.js

function main() {
  var gl = Init();
  if(!gl) {
    console.log(‘Failed to init‘);
    return;
  }

  var n = InitVertices(gl);
  if(n < 0) {
    console.log(‘Failed to init vertices‘);
    return;
  }

  gl.drawArrays(gl.POINTS, 0, n);

}

//@Func: init the WebGL
//@Return: gl(the WebGL context)
function Init() {
  var canvas = document.getElementById(‘webgl‘);

  var gl = getWebGLContext(canvas);
  if(!gl) {
    console.log(‘Failed to get the rendering context for WebGL‘);
    return null;
  }

  if(!initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)) {
    console.log(‘Failed to init shader‘);
    return null;
  }

  gl.clearColor(0.0, 1.0, 1.0, 1.0);

  gl.clear(gl.COLOR_BUFFER_BIT);

  return gl;
}

//@Func: init vertices
//@Return: n(the number of vertex)
function InitVertices(gl) {
  var vertexBuffer = gl.createBuffer();
  if(!vertexBuffer) {
    console.log(‘Failed to create vertex buffer‘);
    return -1;
  }

  gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);

  var n = 6;
  var vertices = new Float32Array([
      -0.6,0.3, -0.3,-0.3, 0.0,0.3,
      0.3,-0.3, 0.6,0.3, 0.9,-0.3
    ]);

  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

  var aPos = gl.getAttribLocation(gl.program, ‘aPos‘);
  if(aPos < 0) {
    console.log(‘Failed to get aPos‘);
    return -1;
  }

  gl.vertexAttribPointer(aPos, 2, gl.FLOAT, false, 0, 0);

  gl.enableVertexAttribArray(aPos);

  return n;
}

View Code

shader.js

// vertical shader
var VSHADER_SOURCE = 
`
  attribute vec4 aPos;
  void main() {
    gl_Position = aPos; 
    gl_PointSize = 30.0;
  }
`

// fragment shader
var FSHADER_SOURCE = 
`
  precision mediump float;
  //uniform vec4 uColor;
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
  }
`