WebGL自学教程——WebGL示例：14. 渲染到纹理和多程序对象

最新推荐文章于 2024-03-20 11:26:16 发布

铁文

最新推荐文章于 2024-03-20 11:26:16 发布

阅读量5k

点赞数 1

分类专栏：编程：Web 文章标签： null filter function input byte buffer

本文链接：https://blog.csdn.net/tiewen/article/details/6925698

版权

编程：Web 专栏收录该内容

46 篇文章 2 订阅

订阅专栏

14. 渲染到纹理和多程序对象

有的时候（比如实现镜像效果），需要将一些场景作为纹理。我们可以使用离屏渲染，使用帧缓冲来达到目的。具体点，是利用帧缓冲对象的附件。在帧缓冲对象中：

可以附加为颜色附件的有：保存颜色值的渲染缓冲对象；2D纹理；单一mip级别的立方图纹理面。

可以附加为深度附件的有：包含深度值的渲染缓冲，保存深度值的2D纹理；单一mip级别的立方图纹理面。

可以附加为模板附件的有：保存模板值的渲染缓冲对象。

在本章示例中，使用2D纹理作为颜色附件，渲染缓冲作为深度附件。至于模板缓冲，暂时还没有用到。

为了方便，将原来的绘图代码移动到了js函数DrawScene中。在RenderScene中，首先创建和配置帧缓冲对象，然后调用DrawScene函数，将内容绘画到了帧缓冲对象中。然后，又调用了一次DrawScene函数，不过这次，是绘画到屏幕上。然后，我绘画了一个三角形，该三角形在第一章的示例中有定义，但我把其绕点顺序改为了顺时针。三角形所使用的纹理，正是帧缓冲中作为颜色附件作为纹理对象。

本示例还演示了如何在一个应用中使用多个程序对象。

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312">
<script type="text/javascript" src="glMatrix-0.9.5.js"></script>

<script type="text/javascript" src="glt.js"></script>
<script type="text/javascript" src="gl-0.1.js"></script>
<script type="text/javascript" src="loadData.js"></script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 a_v3Position;
attribute vec3 a_v3Normal;
uniform mat4 u_m4ModelView;
varying vec3 v_v3TexCoord;
uniform int u_iShadowMode;
varying vec3 v_v3Position;
varying vec3 v_v3Normal;

void main(void)
{
    gl_Position = u_m4ModelView * vec4(a_v3Position, 1.0);

    if(u_iShadowMode == 0)
    {
        v_v3TexCoord = a_v3Position;
        v_v3Position = a_v3Position;
        v_v3Normal = vec3(u_m4ModelView * vec4(a_v3Normal, 1.0));
    }
}
</script>

<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif
uniform samplerCube u_samplerCube;
varying vec3 v_v3TexCoord;
uniform int u_iShadowMode;
varying vec3 v_v3Position;
varying vec3 v_v3Normal;
uniform bool u_bUseLighting;
uniform vec3 u_v3AmbientScale;
uniform vec3 u_v3PointLightPosition;
uniform vec3 u_v3PointLightScale;

void main(void)
{
    if(u_iShadowMode == 0)
    {
        vec3 v3ColorScale;
        if(!u_bUseLighting) v3ColorScale = vec3(1.0, 1.0, 1.0);
        else
        {
            vec3 v3PLV = u_v3PointLightPosition - v_v3Position;
            if(dot(v_v3Normal, v3PLV) > 0.0)//可以被点光源照射到
            {
                //求出顶点到点光源的距离，假设在距离0-1.5范围内线性衰减；当然也可以使用其他的光照公式
                float f = max(0.0, 1.0 - length(v3PLV) / 2.0);//要注意的是，示例中旋转的只有立方体，光源的位置并没有变动

                v3ColorScale = u_v3AmbientScale + u_v3PointLightScale * f;//将衰减后的点光源颜色比例合并到环境光
            }
            else v3ColorScale = u_v3AmbientScale;
        }

        vec4 color = textureCube(u_samplerCube, v_v3TexCoord);
        gl_FragColor = vec4(color.rgb * v3ColorScale, color.a);
    }
    else if(u_iShadowMode == 1) gl_FragColor = vec4(0.7, 0.7, 0.7, 1.0);
    else if(u_iShadowMode == 2) gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0);
    else if(u_iShadowMode == 3) gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0);
    else if(u_iShadowMode == 4) gl_FragColor = vec4(0.0, 0.5, 0.5, 1.0);
}
</script>

<script id="shader-vs-02" type="x-shader/x-vertex">
attribute vec3 a_v3Position;
uniform mat4 u_m4ModelView;
varying vec2 v_v2TexCoord;

void main(void)
{
    //v_v2TexCoord = vec2((a_v3Position.x+1.0)/2.0, 1.0-(a_v3Position.y+1.0)/2.0);
    gl_Position = u_m4ModelView * vec4(a_v3Position, 1.0);
    v_v2TexCoord = vec2(gl_Position.x/2.0, gl_Position.y);
}
</script>

<script id="shader-fs-02" type="x-shader/x-fragment">
#ifdef GL_FRAGMENT_PRECISION_HIGH
    precision highp float;
#else
    precision mediump float;
#endif
uniform sampler2D u_sampler2D;
varying vec2 v_v2TexCoord;

void main(void)
{
    gl_FragColor = texture2D(u_sampler2D, v_v2TexCoord);
}
</script>