【WebGL初学系列之三】闪烁的颜色三角形

最新推荐文章于 2024-03-07 11:44:30 发布

ixshells

最新推荐文章于 2024-03-07 11:44:30 发布

阅读量2k

点赞数

分类专栏： WebGl Javascript 文章标签：图形 javascript webgl

本文链接：https://blog.csdn.net/ixshells/article/details/40711247

版权

本文介绍如何在WebGL中为三角形上色并实现闪烁效果。通过顶点着色器和片段着色器使用varying变量传递颜色信息，并通过动态改变顶点颜色数据，定时渲染以创建闪烁的三角形。

摘要由CSDN通过智能技术生成

本文nbcoders地址：http://nbcoders.com/detail/165

上一篇文章初步的讲解了第一个WebGL程序的编写，现在我们来给这个三角形上上色，让它增添点光彩。

一：整理前面的代码

对于上篇文章的代码，我已经将代码简单真理封装了一下，可能封装得还不是那么完美，等后面学习的内容越来越多的时候再慢慢整理一些代码封装起来成自己的东西。这里很明显的可以发现，我们每次写一个程序的时候都需要初始化canvas和设置视口，所以这里我将设置canvas和视视口写成了一个函数，解析shader代码也写成了一个函数，和编译和链接shader代码相关的初始化shader程序相关的都提了出来，方便以后使用。这里写成了一个InitWebGL.js的文件中，以后可能很多时候都会直接用这个文件，而不会重写这之类的代码。InitWebGL.js中的代码如下：

 //初始化canvas
function initCanvas(canvasId)
{
    //获取绘制上下文
    var myCanvasObject = document.getElementById(canvasId);
    var context = null;
    try
    {
        context = myCanvasObject.getContext("experimental-webgl");
        //设置视口
        context.viewport(0, 0, myCanvasObject.width, myCanvasObject.height);
    } catch (ex)
    {
        alert(ex.toString());
    }
    if (!context)
    {
        alert("我靠， 你的浏览器不支持WebGL,换个浏览器吧");
        return null;
    }
    return context;
}
//解析Shader代码
function shaderSourceFromScript(scriptID)
{
    var shaderScript = document.getElementById(scriptID);
    if (shaderScript == null) return "";
    var sourceCode = "";
    var child = shaderScript.firstChild;
    while (child)
    {
        if (child.nodeType == child.TEXT_NODE) sourceCode += child.textContent;
        child = child.nextSibling;
    }
    return sourceCode;
}
//编译shader
function compileShader(webgl, shaderVectexCode, shaderFramentCode, vertexShaderObj, fragmentShaderObj)
{
    //将shader代码装载到shader Object中
    webgl.shaderSource(vertexShaderObj, shaderVectexCode);
    webgl.shaderSource(fragmentShaderObj, shaderFramentCode);
    //编译shader代码
    webgl.compileShader(vertexShaderObj);
    webgl.compileShader(fragmentShaderObj);
    //检查是否编译成功
    if (!webgl.getShaderParameter(vertexShaderObj, webgl.COMPILE_STATUS))
    {
        alert("error:vertexShaderObject");
        return;
    }
    if (!webgl.getShaderParameter(fragmentShaderObj, webgl.COMPILE_STATUS))
    {
        alert("error:framentShaderObject");
        return;
    }
}
//链接Shader程序
function linkShader(webgl, programObj, vertexShaderObj, fragmentShaderObj)
{
    //一个程序对象只能并且必须附带一个顶点着色器和片段着色器
    webgl.attachShader(programObj, vertexShaderObj);
    webgl.attachShader(programObj, fragmentShaderObj);
    //将着色器变量关联到一个属性索引
   // webgl.bindAttribLocation(programObj, v3PositionIndex, "v3Position");
    webgl.linkProgram(programObj);
    //检查是否链接成功
    if (!webgl.getProgramParameter(programObj, webgl.LINK_STATUS))
    {
        alert("error:ProgramObject");
        return;
    }
    return programObj;
}
//初始化Shader程序，返回链接好的程序对象
function initShaders(webgl, vertexShaderId, framentShaderId, b