每帧旋转-CSDN博客

本文链接：https://blog.csdn.net/directx3d_beginner/article/details/103184235

<html>
<head>11</head>
<body>
<canvas id = "test" width = "200" height = "200">canvas </canvas>
<script src = "webgltest/cuon-matrix.js"></script>
<script >
//顶点着色器
var vertexShaderSource =
    'attribute vec4 a_Position;\n' +
    'attribute vec4 a_Color;\n' +
    'attribute vec4 a_Normal;\n' +                  //法向量
    'uniform mat4 u_mvpMatrix;\n' +
    'uniform mat4 u_ModelMatrix;\n' +               //模型矩阵
    'uniform mat4 u_NormalMatrix;\n' +               //用来变换法向量的矩阵
    'varying vec4 v_Color;\n' +                     //varying变量
    'varying vec3 v_Normal;\n' +                     //varying变量
    'varying vec3 v_Position;\n' +                     //varying变量
    'void main() {\n' +
    'gl_Position = u_mvpMatrix * a_Position;\n'+                     //设置坐标
   'v_Position = vec3( u_ModelMatrix * a_Position) ;\n'           +    //计算顶点的世界坐标
    'v_Normal = normalize(vec3(u_NormalMatrix * a_Normal)); \n' +    //对变换后的法向量进行归一化
    'v_Color = a_Color;\n' +                                        //将数据传给片元着色器

'}\n';

//片元着色器
var fragmentShaderSource =
    'precision mediump float;\n' +
   'uniform vec3 u_LightColor; \n' +               //光的颜色
   'uniform vec3 u_LightPosition; \n' +           //光源位置
   'uniform vec3 u_AmbientLight; \n' +               //环境光颜色
    'varying vec4 v_Color;\n' +                     //varying变量
    'varying vec3 v_Normal;\n' +                     //varying变量
    'varying vec3 v_Position;\n' +                     //varying变量
    'void main() {\n' +
   'float czm_frameNumber = 20.0;\n' +
    'float vtxf_a11 = fract(czm_frameNumber / 120.0) * 3.14159265 * 2.0; \n' +
    'float vtxf_a12 = v_Position.z / 60.0 + sin(vtxf_a11) * 0.1; \n' +
    'gl_FragColor *= vec4(vtxf_a12, vtxf_a12, vtxf_a12, 1.0); \n' +

    'float vtxf_a13 = fract(czm_frameNumber / 360.0); \n' +
    'float vtxf_h = clamp(v_Position.z / 300.0, 0.0, 1.0); \n' +
    'vtxf_a13 = abs(vtxf_a13 - 0.5) * 2.0; \n' +
    'float vtxf_diff = step(0.005, abs(vtxf_h - vtxf_a13)); \n' +
    'gl_FragColor.rgb += gl_FragColor.rgb * (1.0 - vtxf_diff); \n' +
   //对法线归一化，因为内插后长度不一定是1.0
    'vec3 normal = normalize(v_Normal); \n' +
    //计算光线方向并归一化
    'vec3 lightDirection = normalize(u_LightPosition - v_Position); \n ' +
    'float nDotL = max(dot(lightDirection, normal ), 0.0 ); \n' +        //计算光线方向和法向量的点积
    'vec3 diffuse = u_LightColor * vec3(v_Color ) * nDotL ; \n' +        //计算漫反射光的颜色
    'vec3 ambient = u_AmbientLight * vec3(v_Color ); \n' +                //计算环境光的颜色
    'gl_FragColor += vec4( diffuse + ambient, v_Color.a );\n' +                 //将数据传给片元着色器

'}\n';

//创建着色器方法，输入参数：渲染上下文，着色器类型，数据源
function createShader(gl, type, source)
{
    //创建着色器对象
    var shader = gl.createShader(type);
    //提供数据源
    gl.shaderSource(shader,source);
    //编译着色器
    gl.compileShader(shader);
    //链接
    var success = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
    if(success)
    {
        return shader;
    }
    console.log(gl.getShaderInfoLog(shader));
    gl.deleteShader(shader);

}
//将顶点着色器和像素着色器链接到一个着色程序
function createProgram(gl, vertexShader, fragmentShader)
{
    var program = gl.createProgram();
    gl.attachShader( program, vertexShader);
    gl.attachShader( program, fragmentShader);
    gl.linkProgram( program );
    var success = gl.getProgramParameter(program, gl.LINK_STATUS);
    if(success)
    {
        console.log("link right");
        return program;
    }
    console.log(gl.getProgramInfoLog(program));
    gl.deleteProgram(program);
}

//创建顶点缓冲区和索引缓冲区

function initVertexBuffers(program,gl) {
// Create a cube
//    v6----- v5
//   /|      /|
// v1------v0|
// | |     | |
// | |v7---|-|v4
// |/      |/
// v2------v3

var vertices = new Float32Array([   // Vertex coordinates
     1.0, 1.0, 1.0, -1.0, 1.0, 1.0, -1.0,-1.0, 1.0,   1.0,-1.0, 1.0, // v0-v1-v2-v3 front
     1.0, 1.0, 1.0,   1.0,-1.0, 1.0,   1.0,-1.0,-1.0,   1.0, 1.0,-1.0, // v0-v3-v4-v5 right
     1.0, 1.0, 1.0,   1.0, 1.0,-1.0, -1.0, 1.0,-1.0, -1.0, 1.0, 1.0, // v0-v5-v6-v1 up
    -1.0, 1.0, 1.0, -1.0, 1.0,-1.0, -1.0,-1.0,-1.0, -1.0,-1.0, 1.0, // v1-v6-v7-v2 left
    -1.0,-1.0,-1.0,   1.0,-1.0,-1.0,   1.0,-1.0, 1.0, -1.0,-1.0, 1.0, // v7-v4-v3-v2 down
     1.0,-1.0,-1.0, -1.0,-1.0,-1.0, -1.0, 1.0,-1.0,   1.0, 1.0,-1.0   // v4-v7-v6-v5 back
]);

var colors = new Float32Array([    // Colors
    1, 0, 0,   1, 0, 0,   1, 0, 0, 1, 0, 0,     // v0-v1-v2-v3 front
    1, 0, 0,   1, 0, 0,   1, 0, 0, 1, 0, 0,     // v0-v3-v4-v5 right
    1, 0, 0,   1, 0, 0,   1, 0, 0, 1, 0, 0,     // v0-v5-v6-v1 up
    1, 0, 0,   1, 0, 0,   1, 0, 0, 1, 0, 0,     // v1-v6-v7-v2 left
    1, 0, 0,   1, 0, 0,   1, 0, 0, 1, 0, 0,     // v7-v4-v3-v2 down
    1, 0, 0,   1, 0, 0,   1, 0, 0, 1, 0, 0     // v4-v7-v6-v5 back
]);

var normals = new Float32Array([    // Normal
    0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0,   0.0, 0.0, 1.0, // v0-v1-v2-v3 front
    1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0,   1.0, 0.0, 0.0, // v0-v3-v4-v5 right
    0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0,   0.0, 1.0, 0.0, // v0-v5-v6-v1 up
   -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
    0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0,   0.0,-1.0, 0.0, // v7-v4-v3-v2 down
    0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0,   0.0, 0.0,-1.0   // v4-v7-v6-v5 back
]);

var indices = new Uint8Array([       // Indices of the vertices
     0, 1, 2,   0, 2, 3,    // front
     4, 5, 6,   4, 6, 7,    // right
     8, 9,10,   8,10,11,    // up
    12,13,14, 12,14,15,    // left
    16,17,18, 16,18,19,    // down
    20,21,22, 20,22,23     // back
]);

// Create a buffer object
var indexBuffer = gl.createBuffer();
if (!indexBuffer)
return -1;

// Write the vertex coordinates and color to the buffer object
if (!initArrayBuffer(program,gl, vertices, 3, gl.FLOAT, 'a_Position'))
return -1;

if (!initArrayBuffer(program,gl, colors, 3, gl.FLOAT, 'a_Color'))
return -1;

if (!initArrayBuffer(program,gl, colors, 3, gl.FLOAT, 'a_Normal'))
return -1;
// Write the indices to the buffer object
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, indices, gl.STATIC_DRAW);

return indices.length;
}

function initArrayBuffer(program, gl, data, num, type, attribute) {
var buffer = gl.createBuffer();   // Create a buffer object
if (!buffer) {
    console.log('Failed to create the buffer object');
    return false;
}
// Write date into the buffer object
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW);
// Assign the buffer object to the attribute variable
var a_attribute = gl.getAttribLocation(program, attribute);
if (a_attribute < 0) {
    console.log('Failed to get the storage location of ' + attribute);
    return false;
}
gl.vertexAttribPointer(a_attribute, num, type, false, 0, 0);
// Enable the assignment of the buffer object to the attribute variable
gl.enableVertexAttribArray(a_attribute);

return true;
}
    var canvas = document.getElementById("test");
    //创建webgl渲染上下文
    var gl = canvas.getContext("webgl");
    //var gl = WebGLUtils.setupWebGL(canvas);
    if(!gl)
    {
        console.log("wrong");
    }
    else
    {
        console.log("right");
    }
    //初始化着色器

    var vertexShader = createShader(gl,gl.VERTEX_SHADER,vertexShaderSource);
    var fragmentShader = createShader(gl,gl.FRAGMENT_SHADER, fragmentShaderSource);
    var program = createProgram(gl, vertexShader, fragmentShader);
    gl.useProgram(program);
    //创建顶点数组
    var n = initVertexBuffers(program,gl);

       //模型矩阵
       var modelMatrix = new Matrix4();
       //用来变换法向量的矩阵
       var normalMatrix = new Matrix4();
       var g_near = 1.0, g_far = 100.0;
       //模型视图投影矩阵
       var mvpMatrix = new Matrix4();
   var rotateDeg = 1.0;
   var mytick = function()
       {
       mvpMatrix.setPerspective(30, canvas.width / canvas.height,g_near, g_far);
       mvpMatrix.lookAt(3,3,7,0,0,0,0,1,0);
       //获取投影矩阵
       var u_ModelMatrix = gl.getUniformLocation(program, 'u_ModelMatrix');
       var u_mvpMatrix = gl.getUniformLocation(program, 'u_mvpMatrix');
       var u_NormalMatrix = gl.getUniformLocation(program, 'u_NormalMatrix');
       var u_LightColor = gl.getUniformLocation(program, 'u_LightColor');
       var u_LightPosition = gl.getUniformLocation(program, 'u_LightPosition');
       //环境光颜色
       var u_AmbientLight = gl.getUniformLocation(program, 'u_AmbientLight' );

       //沿着Y轴平移
       modelMatrix.setTranslate(0,1,0)
       //绕z轴旋转
       //modelMatrix.rotate(30,0,0,1);
       modelMatrix.rotate(rotateDeg,0,0,1);
       mvpMatrix.multiply(modelMatrix);
       //计算模型视图投影矩阵

       //将投影矩阵传给u_ProjMatrix变量
       gl.uniformMatrix4fv(u_mvpMatrix, false, mvpMatrix.elements);
       //根据模型矩阵计算用来变换法向量的矩阵
       normalMatrix.setInverseOf(modelMatrix);
       normalMatrix.transpose();
       gl.uniformMatrix4fv(u_NormalMatrix, false, normalMatrix.elements);
       //设置光线颜色(白色)
       gl.uniform3f(u_LightColor, 1.0, 1.0, 1.0 );
       gl.uniform3f(u_LightPosition, 0.0, 3.0, 4.0 );


       //清除颜色
       //在绘制之前，清除深度缓冲区
       gl.clearColor(0.0,0.0,0.0,1.0);
       //开启隐藏面消除功能
       gl.enable(gl.DEPTH_TEST);
       gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
       //绘制正方体
       gl.drawElements(gl.TRIANGLES, n, gl.UNSIGNED_BYTE, 0 );

       rotateDeg += 1
       requestAnimationFrame(mytick);
   }
   mytick();

    </script>
</body>
</html>