WebGL自学教程——WebGL示例：13.0 代码整理

最新推荐文章于 2018-08-15 00:26:23 发布

铁文

最新推荐文章于 2018-08-15 00:26:23 发布

阅读量2.4k

点赞数

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

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

版权

<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 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);
}
</script>

<script>

var textureObject = null;
var shadowMat4 = null;//预先计算好的阴影矩阵
var mouseDown = false;
var mousePosition = [0, 0];
var perspectiveMat4 = null;//预先计算好的投影矩阵
var rotateMat4 = null;
var rotatePosV3 = [0, 0, 0];;//记录离圆心的偏移，2D，弄成vec3只是为了方便执行加减操作
var jsConeMat4 = null;

function LoadData()
{
    var jsCubeData = [
            // Front face
            -0.3, -0.3, 0.3,
             0.3, -0.3, 0.3,
             0.3, 0.3, 0.3,

最低0.47元/天解锁文章

铁文

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WebGL自学教程——WebGL示例：13.0 代码整理

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;v
复制链接

扫一扫

专栏目录