webgl 入门的简单小模型

来源：互联网发布：nginx 允许目录浏览编辑：程序博客网时间：2024/05/22 03:31

onload = function () {    var c = document.getElementById("canvas");    c.width = 500;    c.height = 300;    var gl = c.getContext('webgl') || c.getContext('experimental-webgl');    gl.clearColor(1.0, 1.0, 0.0, 1.0);    gl.clearDepth(1.0);    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);    //Éú³É¶¥µã×ÅÉ«Æ÷ºÍÆ¬¶Î×ÅÉ«Æ÷    var v_shader = create_shader('vs');    var f_shader = create_shader('fs');    //³ÌÐò¶ÔÏóµÄÉú³ÉºÍÁ¬½Ó    var prg = create_program(v_shader, f_shader);    //从数组中获取attributeLocation    var attLocation = new Array(2);    attLocation[0] = gl.getAttribLocation(prg, 'position');      attLocation[1] = gl.getAttribLocation(prg, 'color');      //将元素数attribute保存到数组中    var attStride = new Array(2);    attStride[0] = 3;    attStride[1] = 4;    //保存顶点位置的数组    var vertex_position = [        0.0, 1.0, 0.0,1.0, 0.0, 0.0,-1.0, 0.0, 0.0    ];    //保存顶点颜色的数组    var vertex_color = [     1.0, 0.0, 0.0, 1.0,      0.0, 1.0, 0.0, 1.0,      0.0, 0.0, 1.0, 1.0      ];    //生成VBO    var position_vbo = create_vbo(vertex_position);    var color_vbo = create_vbo(vertex_color);    //vbo绑定位置    gl.bindBuffer(gl.ARRAY_BUFFER, position_vbo);    gl.enableVertexAttribArray(attLocation[0]);    gl.vertexAttribPointer(attLocation[0], attStride[0], gl.FLOAT, false, 0, 0);    //vbo绑定颜色    gl.bindBuffer(gl.ARRAY_BUFFER, color_vbo);    gl.enableVertexAttribArray(attLocation[1]);    gl.vertexAttribPointer(attLocation[1], attStride[1], gl.FLOAT, false, 0, 0);    var m = new matIV();    var mMatrix = m.identity(m.create());    var vMatrix = m.identity(m.create());    var pMatrix = m.identity(m.create());    var mvpMatrix = m.identity(m.create());    //视图变换坐标矩阵    m.lookAt([0.0, 3.0, 1.0], [0, 0, 0], [0, 1, 0], vMatrix);    // 投影坐标变幻矩阵    m.perspective(90, c.width / c.height, 0.1, 100, pMatrix);    //各矩阵相乘，得到最终的的  坐标变换矩阵    m.multiply(pMatrix, vMatrix, mvpMatrix);    m.multiply(mvpMatrix, mMatrix, mvpMatrix);   // var uniLocation = gl.getUniformLocation(prg, 'mvpMatrix');    var uniLocation = gl.getUniformLocation(prg, 'mvpMatrix');    gl.uniformMatrix4fv(uniLocation, false, mvpMatrix);    gl.drawArrays(gl.TRIANGLES, 0, 3);    gl.flush();    function create_vbo(data)    {        var vbo = gl.createBuffer();        gl.bindBuffer(gl.ARRAY_BUFFER, vbo);        gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(data), gl.STATIC_DRAW);        gl.bindBuffer(gl.ARRAY_BUFFER, null);        return vbo;    }    //³ÌÐò¶ÔÏóµÄÉú³ÉºÍ×ÅÉ«Æ÷Á¬½Ó    function create_program(vs,fs)    {        var program = gl.createProgram();        gl.attachShader(program, vs);        gl.attachShader(program, fs);        gl.linkProgram(program);        //ÅÐ¶Ï×ÅÉ«Æ÷ÊÇ·ñÁ¬½Ó³É¹¦        if(gl.getProgramParameter(program,gl.LINK_STATUS))        {            gl.useProgram(program);            return program;        }        else {            alert(gl.getProgramLog(program));        }    }    //Éú³É×ÅÉ«Æ÷µÄº¯Êý    function  create_shader(id)    {        var shader;        //¸ù¾Ýid»ñÈ¡Ö¸¶¨µÄscript±êÇ©        var scriptElement = document.getElementById(id);        if (!scriptElement) { return; }        switch(scriptElement.type)        {            case 'x-shader/x-vertex':                shader = gl.createShader(gl.VERTEX_SHADER);                break;            case 'x-shader/x-fragment':                shader = gl.createShader(gl.FRAGMENT_SHADER);                break;        }        //½«±êÇ©ÖÐµÄ´úÂë·ÖÅä¸øÉú³ÉµÄ×ÅÉ«Æ÷        gl.shaderSource(shader, scriptElement.text);        //gl.complieShader(shader);        gl.compileShader(shader);       if(gl.getShaderParameter(shader, gl.COMPILE_STATUS)){            return shader;        }        else {            alert(gl.getShaderInfoLog(shader));        }    }};

<html>    <head>        <title>wgld.org WebGL sample 002</title>        <script src="script.js" type="text/javascript"></script>        <script src="minMatrix.js" type="text/javascript"></script>                <script id="vs" type="x-shader/x-vertex">attribute vec3 position;uniform   mat4 mvpMatrix;attribute vec4 color;varying vec4 vColor;void main(void){    vColor = color;    gl_Position = mvpMatrix * vec4(position, 1.0);}        </script>                <script id="fs" type="x-shader/x-fragment">precision mediump float;varying vec4 vColor;void main(void){    gl_FragColor = vColor;}        </script>    </head>    <body>        <canvas id="canvas"></canvas>    </body></html>

// ------------------------------------------------------------------------------------------------// minMatrix.js// version 0.0.1// Copyright (c) doxas// ------------------------------------------------------------------------------------------------function matIV(){//生成一个4*4矩阵 是一个Float32Array对象，所有的元素都被初始化为0；this.create = function(){return new Float32Array(16);};//将接受的矩阵参数进行会促使花并进行返回this.identity = function(dest){dest[0]  = 1; dest[1]  = 0; dest[2]  = 0; dest[3]  = 0;dest[4]  = 0; dest[5]  = 1; dest[6]  = 0; dest[7]  = 0;dest[8]  = 0; dest[9]  = 0; dest[10] = 1; dest[11] = 0;dest[12] = 0; dest[13] = 0; dest[14] = 0; dest[15] = 1;return dest;};//mat1相乘的原始矩阵 mat2作为乘数的矩阵 dest用来保存计算结果的矩阵this.multiply = function(mat1, mat2, dest){var a = mat1[0],  b = mat1[1],  c = mat1[2],  d = mat1[3],e = mat1[4],  f = mat1[5],  g = mat1[6],  h = mat1[7],i = mat1[8],  j = mat1[9],  k = mat1[10], l = mat1[11],m = mat1[12], n = mat1[13], o = mat1[14], p = mat1[15],A = mat2[0],  B = mat2[1],  C = mat2[2],  D = mat2[3],E = mat2[4],  F = mat2[5],  G = mat2[6],  H = mat2[7],I = mat2[8],  J = mat2[9],  K = mat2[10], L = mat2[11],M = mat2[12], N = mat2[13], O = mat2[14], P = mat2[15];dest[0] = A * a + B * e + C * i + D * m;dest[1] = A * b + B * f + C * j + D * n;dest[2] = A * c + B * g + C * k + D * o;dest[3] = A * d + B * h + C * l + D * p;dest[4] = E * a + F * e + G * i + H * m;dest[5] = E * b + F * f + G * j + H * n;dest[6] = E * c + F * g + G * k + H * o;dest[7] = E * d + F * h + G * l + H * p;dest[8] = I * a + J * e + K * i + L * m;dest[9] = I * b + J * f + K * j + L * n;dest[10] = I * c + J * g + K * k + L * o;dest[11] = I * d + J * h + K * l + L * p;dest[12] = M * a + N * e + O * i + P * m;dest[13] = M * b + N * f + O * j + P * n;dest[14] = M * c + N * g + O * k + P * o;dest[15] = M * d + N * h + O * l + P * p;return dest;};//mat 原始矩阵 vec缩放向量 用来保存结果的矩阵this.scale = function(mat, vec, dest){dest[0]  = mat[0]  * vec[0];dest[1]  = mat[1]  * vec[0];dest[2]  = mat[2]  * vec[0];dest[3]  = mat[3]  * vec[0];dest[4]  = mat[4]  * vec[1];dest[5]  = mat[5]  * vec[1];dest[6]  = mat[6]  * vec[1];dest[7]  = mat[7]  * vec[1];dest[8]  = mat[8]  * vec[2];dest[9]  = mat[9]  * vec[2];dest[10] = mat[10] * vec[2];dest[11] = mat[11] * vec[2];dest[12] = mat[12];dest[13] = mat[13];dest[14] = mat[14];dest[15] = mat[15];return dest;};this.translate = function(mat, vec, dest){dest[0] = mat[0]; dest[1] = mat[1]; dest[2]  = mat[2];  dest[3]  = mat[3];dest[4] = mat[4]; dest[5] = mat[5]; dest[6]  = mat[6];  dest[7]  = mat[7];dest[8] = mat[8]; dest[9] = mat[9]; dest[10] = mat[10]; dest[11] = mat[11];dest[12] = mat[0] * vec[0] + mat[4] * vec[1] + mat[8]  * vec[2] + mat[12];dest[13] = mat[1] * vec[0] + mat[5] * vec[1] + mat[9]  * vec[2] + mat[13];dest[14] = mat[2] * vec[0] + mat[6] * vec[1] + mat[10] * vec[2] + mat[14];dest[15] = mat[3] * vec[0] + mat[7] * vec[1] + mat[11] * vec[2] + mat[15];return dest;};this.rotate = function(mat, angle, axis, dest){var sq = Math.sqrt(axis[0] * axis[0] + axis[1] * axis[1] + axis[2] * axis[2]);if(!sq){return null;}var a = axis[0], b = axis[1], c = axis[2];if(sq != 1){sq = 1 / sq; a *= sq; b *= sq; c *= sq;}var d = Math.sin(angle), e = Math.cos(angle), f = 1 - e,g = mat[0],  h = mat[1], i = mat[2],  j = mat[3],k = mat[4],  l = mat[5], m = mat[6],  n = mat[7],o = mat[8],  p = mat[9], q = mat[10], r = mat[11],s = a * a * f + e,t = b * a * f + c * d,u = c * a * f - b * d,v = a * b * f - c * d,w = b * b * f + e,x = c * b * f + a * d,y = a * c * f + b * d,z = b * c * f - a * d,A = c * c * f + e;if(angle){if(mat != dest){dest[12] = mat[12]; dest[13] = mat[13];dest[14] = mat[14]; dest[15] = mat[15];}} else {dest = mat;}dest[0] = g * s + k * t + o * u;dest[1] = h * s + l * t + p * u;dest[2] = i * s + m * t + q * u;dest[3] = j * s + n * t + r * u;dest[4] = g * v + k * w + o * x;dest[5] = h * v + l * w + p * x;dest[6] = i * v + m * w + q * x;dest[7] = j * v + n * w + r * x;dest[8] = g * y + k * z + o * A;dest[9] = h * y + l * z + p * A;dest[10] = i * y + m * z + q * A;dest[11] = j * y + n * z + r * A;return dest;}; //eye镜头位置向量  center镜头参考点的向量  up镜头的方向向量  dest用来保存计算结果的矩阵 /* * 视图变换矩阵的生成，eye是镜头在三围空间中的位置,center是这个镜头的参考点，up是镜头方向向量向量 */this.lookAt = function(eye, center, up, dest){var eyeX    = eye[0],    eyeY    = eye[1],    eyeZ    = eye[2],upX     = up[0],     upY     = up[1],     upZ     = up[2],centerX = center[0], centerY = center[1], centerZ = center[2];if(eyeX == centerX && eyeY == centerY && eyeZ == centerZ){return this.identity(dest);}var x0, x1, x2, y0, y1, y2, z0, z1, z2, l;z0 = eyeX - center[0]; z1 = eyeY - center[1]; z2 = eyeZ - center[2];l = 1 / Math.sqrt(z0 * z0 + z1 * z1 + z2 * z2);z0 *= l; z1 *= l; z2 *= l;x0 = upY * z2 - upZ * z1;x1 = upZ * z0 - upX * z2;x2 = upX * z1 - upY * z0;l = Math.sqrt(x0 * x0 + x1 * x1 + x2 * x2);if(!l){x0 = 0; x1 = 0; x2 = 0;} else {l = 1 / l;x0 *= l; x1 *= l; x2 *= l;}y0 = z1 * x2 - z2 * x1; y1 = z2 * x0 - z0 * x2; y2 = z0 * x1 - z1 * x0;l = Math.sqrt(y0 * y0 + y1 * y1 + y2 * y2);if(!l){y0 = 0; y1 = 0; y2 = 0;} else {l = 1 / l;y0 *= l; y1 *= l; y2 *= l;}dest[0] = x0; dest[1] = y0; dest[2]  = z0; dest[3]  = 0;dest[4] = x1; dest[5] = y1; dest[6]  = z1; dest[7]  = 0;dest[8] = x2; dest[9] = y2; dest[10] = z2; dest[11] = 0;dest[12] = -(x0 * eyeX + x1 * eyeY + x2 * eyeZ);dest[13] = -(y0 * eyeX + y1 * eyeY + y2 * eyeZ);dest[14] = -(z0 * eyeX + z1 * eyeY + z2 * eyeZ);dest[15] = 1;return dest;};/** 投影变换矩阵的生成，这里生成的一般被称为【透视摄影】的变换矩阵。*fovy视角*aspect 屏幕的宽高比例* near 近截面的位置* far 远截面的位置* dest 用来保存计算结果的矩阵*/this.perspective = function(fovy, aspect, near, far, dest){var t = near * Math.tan(fovy * Math.PI / 360);var r = t * aspect;var a = r * 2, b = t * 2, c = far - near;dest[0] = near * 2 / a;dest[1] = 0;dest[2] = 0;dest[3] = 0;dest[4] = 0;dest[5] = near * 2 / b;dest[6] = 0;dest[7] = 0;dest[8] = 0;dest[9] = 0;dest[10] = -(far + near) / c;dest[11] = -1;dest[12] = 0;dest[13] = 0;dest[14] = -(far * near * 2) / c;dest[15] = 0;return dest;};//矩阵的行列互换this.transpose = function(mat, dest){dest[0]  = mat[0];  dest[1]  = mat[4];dest[2]  = mat[8];  dest[3]  = mat[12];dest[4]  = mat[1];  dest[5]  = mat[5];dest[6]  = mat[9];  dest[7]  = mat[13];dest[8]  = mat[2];  dest[9]  = mat[6];dest[10] = mat[10]; dest[11] = mat[14];dest[12] = mat[3];  dest[13] = mat[7];dest[14] = mat[11]; dest[15] = mat[15];return dest;};//求矩阵的逆矩阵this.inverse = function(mat, dest){var a = mat[0],  b = mat[1],  c = mat[2],  d = mat[3],e = mat[4],  f = mat[5],  g = mat[6],  h = mat[7],i = mat[8],  j = mat[9],  k = mat[10], l = mat[11],m = mat[12], n = mat[13], o = mat[14], p = mat[15],q = a * f - b * e, r = a * g - c * e,s = a * h - d * e, t = b * g - c * f,u = b * h - d * f, v = c * h - d * g,w = i * n - j * m, x = i * o - k * m,y = i * p - l * m, z = j * o - k * n,A = j * p - l * n, B = k * p - l * o,ivd = 1 / (q * B - r * A + s * z + t * y - u * x + v * w);dest[0]  = ( f * B - g * A + h * z) * ivd;dest[1]  = (-b * B + c * A - d * z) * ivd;dest[2]  = ( n * v - o * u + p * t) * ivd;dest[3]  = (-j * v + k * u - l * t) * ivd;dest[4]  = (-e * B + g * y - h * x) * ivd;dest[5]  = ( a * B - c * y + d * x) * ivd;dest[6]  = (-m * v + o * s - p * r) * ivd;dest[7]  = ( i * v - k * s + l * r) * ivd;dest[8]  = ( e * A - f * y + h * w) * ivd;dest[9]  = (-a * A + b * y - d * w) * ivd;dest[10] = ( m * u - n * s + p * q) * ivd;dest[11] = (-i * u + j * s - l * q) * ivd;dest[12] = (-e * z + f * x - g * w) * ivd;dest[13] = ( a * z - b * x + c * w) * ivd;dest[14] = (-m * t + n * r - o * q) * ivd;dest[15] = ( i * t - j * r + k * q) * ivd;return dest;};}

0 0