webgl 学习笔记

206 阅读1分钟

GLInstance 实例

function GLInstance(canvasID){
  gl = canvas.getContext("webgl)
  gl.clearColor(1.0,1.0,1.0,1.0)
  gl.fClear = function(){ this.clear(this.COLOR_BUFFER_BIT | this.DEPTH_BUFFER_BIT); return this; }
  gl.fSetSize = function(w,h){
        this.canvas.style.width = w + "px";
        this.canvas.style.height = h + "px";
        this.canvas.width = w;
        this.canvas.height = h;

        this.viewport(0,0,w,h);
        return this;
    }
}
  1. 初始化gl对象。
  2. gl.clearColor 与 gl.clear 需要配合使用,完成一个刷新过程。
  3. 原因:防止缓冲区中原有的颜色信息影响本次绘图。

ShaderUtil 着色器工具

class ShaderUtil{
	static domShaderSrc(elmID){
	}

	static createShader(gl,src,type){
	}

	static createProgram(gl,vShader,fShader,doValidate){
	}
}
  1. 获取着色器文本。
  2. 创建着色器。
  3. 创建项目连接着色器。

viewer.html

  1. 实例化GLInstance。
  2. 获取顶点着色器文本和片元着色器文本 domShaderSrc。
  3. 编译着色器文本和验证器 createShader。
  4. 项目和着色器连接 createProgram。
  5. 获取uniforms 和attributes的变量。
  6. 激活项目并画点。