创建WebGL着色器程序

既然是进阶,我们就要先从基础入手,那么先看一下如何创建一个WebGL的着色器程序:

//  初始化着色器程序插件
//  initShaders.js
//

function initShaders(gl, vertexShaderId, fragmentShaderId) {
    var vertShdr; //顶点着色器对象
    var fragShdr; //片元着色器对象

    var vertElem = document.getElementById(vertexShaderId); //通过顶点着色器id获取dom标签
    if (!vertElem) {
        alert("通过当前id无法获取到dom对象:" + vertexShaderId);
        return -1;
    }
    else {
        vertShdr = gl.createShader(gl.VERTEX_SHADER); //创建一个顶点着色器对象
        gl.shaderSource(vertShdr, vertElem.text); //设置着色器运行代码
        gl.compileShader(vertShdr); //编译为二进制数据后,可以被WebGLProgram对象使用
        if (!gl.getShaderParameter(vertShdr, gl.COMPILE_STATUS)) { //检查着色器对象是否创建成功
            var msg = "着色器创建失败,错误信息为:"
                + "<pre>" + gl.getShaderInfoLog(vertShdr) + "</pre>";
            alert(msg);
            return -1;
        }
    }

    var fragElem = document.getElementById(fragmentShaderId); //获取片元着色器dom对象
    if (!fragElem) {
        alert("无法通过当前id获取到片元着色器dom对象:" + fragmentShaderId);
        return -1;
    }
    else {
        fragShdr = gl.createShader(gl.FRAGMENT_SHADER); //创建一个片元着色器对象
        gl.shaderSource(fragShdr, fragElem.text); //设置片元着色器运行代码
        gl.compileShader(fragShdr); //编译为二进制数据后,可以被WebGLProgram对象使用
        if (!gl.getShaderParameter(fragShdr, gl.COMPILE_STATUS)) { //检查片元着色器是否创建成功
            var msg = "片元着色器无法创建成功,错误信息:"
                + "<pre>" + gl.getShaderInfoLog(fragShdr) + "</pre>";
            alert(msg);
            return -1;
        }
    }

    var program = gl.createProgram(); //创建一个着色器程序对象
    gl.attachShader(program, vertShdr); //将顶点着色器添加到着色器程序
    gl.attachShader(program, fragShdr); //将片元着色器添加到着色器程序
    gl.linkProgram(program); //将着色器程序链接到添加的着色器对象

    if (!gl.getProgramParameter(program, gl.LINK_STATUS)) { //检查着色器程序是否创建成功
        var msg = "着色器程序创建失败,错误信息:"
            + "<pre>" + gl.getProgramInfoLog(program) + "</pre>";
        alert(msg);
        return -1;
    }

    //最后将创建的着色器程序返回
    return program;
}

以上是一个初始化着色器程序的代码,我做了一下翻译,大家看一下吧。

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值