Shader

attribute vec4 a_Position;
attribute vec2 a_TexCoord;
varying vec2 v_TexCoord;
uniform mat4 u_ProjMatrix;
uniform mat4 u_ViewMatrix;
uniform mat4 u_ModelMatrix;

void main(){ 
    gl_Position = u_ProjMatrix * u_ViewMatrix * u_ModelMatrix * a_Position;
    v_TexCoord = a_TexCoord; 
}

precision mediump float; 
varying vec2 v_TexCoord;
uniform sampler2D u_Sampler;
void main() {
    gl_FragColor = texture2D(u_Sampler,v_TexCoord);
}

webgl 编译shader

var gl = webgl.getContext("webgl");
var vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexStr.innerHTML);
gl.compileShader(vertexShader);

var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragStr.innerHTML);
gl.compileShader(fragShader);

var program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragShader);
gl.linkProgram(program);
gl.useProgram(program);

清空:

gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.enable(gl.DEPTH_TEST);
gl.clear(gl.COLOR_BUFFER_BIT| gl.DEPTH_BUFFER_BIT);

webgl 获取glsl变量位置:

//获取Attribute位置
var a_Position = gl.getAttribLocation(program,'a_Position');
gl.enableVertexAttribArray(a_Position);

//获取Uniform位置
var u_Sampler = gl.getUniformLocation(program, 'u_Sampler');//获取位置

关于 dataBuffer:

var bufferData = new Float32Array([
    -0.5, 0.5, 0.0, 1.0,
    -0.5, -0.5, 0.0, 0.0,
    0.5, 0.5, 1.0, 1.0,
    0.5, -0.5, 1.0, 0.0
]);

var FSIZE = bufferData.BYTES_PER_ELEMENT;
var dataBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,dataBuffer);
gl.bufferData(gl.ARRAY_BUFFER,bufferData, gl.STATIC_DRAW);
gl.vertexAttribPointer(a_Position, 2 ,gl.FLOAT,false,FSIZE * 4, FSIZE*0);
gl.vertexAttribPointer(a_TexCoord, 2 ,gl.FLOAT,false,FSIZE * 4, FSIZE*2);

关于 gl.drawArrays:

gl.drawArrays(gl.TRIANGLE_STRIP,0,4);
// POINTS（点）
// LINE_STRIP（不闭合折线）
// LINE_LOOP（闭合折线）
// LINES（独立的线段）
// TRIANGLE_STRIP（顶点按顺序相连的三角形）
// TRIANGLE_FAN（扇形顺序组合三角形）
// TRIANGLES（每三个顶点组合成一个三角形）

关于 gl.drawElements:

  var indices = new Uint8Array([
    0, 1, 2,   0, 2, 3,    // front
    0, 3, 4,   0, 4, 5,    // right
    0, 5, 6,   0, 6, 1,    // up
    1, 6, 7,   1, 7, 2,    // left
    7, 4, 3,   7, 3, 2,    // down
    4, 7, 6,   4, 6, 5     // back
 ]);
  var indexBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);
  gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0);
  // POINTS（点）
  // LINE_STRIP（不闭合折线）
  // LINE_LOOP（闭合折线）
  // LINES（独立的线段）
  // TRIANGLE_STRIP（顶点按顺序相连的三角形）
  // TRIANGLE_FAN（扇形顺序组合三角形）
  // TRIANGLES（每三个顶点组合成一个三角形）

绑定图像:

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL,1);
gl.activeTexture(gl.TEXTURE0);
var texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.texParameteri(gl.TEXTURE_2D,gl.TEXTURE_MIN_FILTER,gl.LINEAR);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGB,gl.RGB,gl.UNSIGNED_BYTE,img1);
gl.uniform1i(u_Sampler,0);

设置矩阵转换:

var mvpMatrix = new Matrix4();
mvpMatrix.setPerspective(30, 1, 1, 100);
mvpMatrix.lookAt(3, 3, 7, 0, 0, 0, 0, 1, 0);
gl.uniformMatrix4fv(u_MvpMatrix, false, mvpMatrix.elements);