4WebGL Shader代码隔离

SGS

SGS 由 Shader,WebGL API,JavaScript三部分构成，Shader层代表着色器语言，也可以在Shader中定义数据修改和操作的业务逻辑；G代表WebGL API，它负责将数据模型转连接Shader和JavaScrpt，S是JavaScrpt语言模型。如下图所示：

实现SGS

读取Shader文件

function loadShaderFromFile(filename) {
  return new Promise((resolve, reject)=>{
    var request = new XMLHttpRequest();
    request.open("GET", filename, true);
    request.onreadystatechange = function () {
        if(request.readyState === 4 && request.status === 200) {
          resolve(request.responseText) ;
        }
    };
    request.send();
  })
}

WebGL编译shader文件内容

/**
 * 初始化shader
 * @param gl 
 * @param vshader 
 * @param fshader 
 * @return true
 */
function initShaders(gl, vshader, fshader) {

  var program = createProgram(gl, vshader, fshader);
  if (!program) {
    console.log('创建项目失败！');
    reject(false);
  }

  gl.useProgram(program);
  gl.program = program;


}

 * 创建项目
 * @param gl 
 * @param vshader 
 * @param fshader 
 * @return program
 */
function createProgram(gl, vshader, fshader) {

  var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
  var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
  if (!vertexShader || !fragmentShader) {
    return null;
  }


  var program = gl.createProgram();
  if (!program) {
    return null;
  }


  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);


  gl.linkProgram(program);


  var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
  if (!linked) {
    var error = gl.getProgramInfoLog(program);
    console.log('Failed to link program: ' + error);
    gl.deleteProgram(program);
    gl.deleteShader(fragmentShader);
    gl.deleteShader(vertexShader);
    return null;
  }
  return program;
}

JavaScript 操控数据

我将公共的JavaScript都封装在相应的Js文件里，并做了详细的标注，有需要的朋友可以再官网下载。