WebGL之旋转三角形

最新推荐文章于 2022-09-13 15:43:16 发布
神杀中龙
最新推荐文章于 2022-09-13 15:43:16 发布
阅读量1.9k
点赞数
分类专栏： WebGL HLSL/Cg/GLSL 文章标签： WebGL HTML5 GLSL
HLSL/Cg/GLSL 同时被 2 个专栏收录
6 篇文章
订阅专栏
WebGL
3 篇文章
订阅专栏
<pre name="code" class="html"><!DOCTYPE>
<html>
<head>
<title>02.WebGL之旋转三角形</title>
<meta charset="UTF-8">
<script type="text/javascript" src="glMatrix-0.9.5.js"></script>

<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 v3Position;
attribute vec3 av3Color;
varying vec3 vv3Color;

 attribute vec3 aVertexPosition; 
uniform mat4 um4Rotate;   
 
void main(void)
{
    vv3Color = av3Color;
	vec4 v4pos = um4Rotate * vec4(v3Position, 1.0);

    gl_Position = v4pos; //vec4(v3Position, 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
varying vec3 vv3Color;
void main(void)
{
    gl_FragColor = vec4(vv3Color, 1.0);
    //gl_FragColor = vec4(0.0, 0.0, 1.0, 1.0); //RGBA
}
</script>

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

var webgl = null;
var vertexShaderObject = null;
var fragmentShaderObject = null;
var programObject = null;
var triangleBuffer = null; 
var v3PositionIndex = 0;
var triangleColorBuffer = null;
var v3ColorIndex = 1;

var angle = 0;
var um4RotateIndex = -1;
var interval = 60; 


function RenderScene()
{
    webgl.clearColor(0.0, 0.0, 0.0, 1.0);
    webgl.clear(webgl.COLOR_BUFFER_BIT);

    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
    webgl.enableVertexAttribArray(v3PositionIndex); 
    webgl.vertexAttribPointer(v3PositionIndex, 3, webgl.FLOAT, false, 0, 0);

    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleColorBuffer);
    webgl.enableVertexAttribArray(v3ColorIndex); 
    webgl.vertexAttribPointer(v3ColorIndex, 3, webgl.FLOAT, false, 0, 0);
    
	//矩阵变换
	var m4Rotate = mat4.create();
	mat4.identity(m4Rotate);
	mat4.rotateY(m4Rotate, angle * Math.PI/180);
    webgl.uniformMatrix4fv(um4RotateIndex, false, m4Rotate);

    webgl.drawArrays(webgl.TRIANGLES, 0, 3);
}

function RotateTriangle()
{
 angle += 10;
 if(angle >= 360) angle -= 360;
 
 RenderScene();
}

function Init()
{
    var myCanvasObject = document.getElementById('myCanvas');
    webgl = myCanvasObject.getContext("experimental-webgl");

    webgl.viewport(0, 0, myCanvasObject.clientWidth, myCanvasObject.clientHeight);

    vertexShaderObject = webgl.createShader(webgl.VERTEX_SHADER);
    fragmentShaderObject = webgl.createShader(webgl.FRAGMENT_SHADER);

    webgl.shaderSource(vertexShaderObject, ShaderSourceFromScript("shader-vs"));
    webgl.shaderSource(fragmentShaderObject, ShaderSourceFromScript("shader-fs"));

    webgl.compileShader(vertexShaderObject);
    webgl.compileShader(fragmentShaderObject);

    if(!webgl.getShaderParameter(vertexShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(vertexShaderObject));return;}
    if(!webgl.getShaderParameter(fragmentShaderObject, webgl.COMPILE_STATUS)){alert(webgl.getShaderInfoLog(fragmentShaderObject));return;}

    programObject = webgl.createProgram();

    webgl.attachShader(programObject, vertexShaderObject);
    webgl.attachShader(programObject, fragmentShaderObject);

    webgl.bindAttribLocation(programObject, v3PositionIndex, "v3Position");
    webgl.bindAttribLocation(programObject, v3ColorIndex, "av3Color");

    webgl.linkProgram(programObject);
    if(!webgl.getProgramParameter(programObject, webgl.LINK_STATUS)){alert(webgl.getProgramInfoLog(programObject));return;}
    
	um4RotateIndex = webgl.getUniformLocation(programObject, "um4Rotate");
    webgl.useProgram(programObject);
    

    var jsArrayData = [
	    -1.0, -1.0, 0.0, 
        -1.0, 1.0, 0.0,//上顶点
         1.0, -1.0, 0.0,//左顶点
         1.0, 1.0, 0.0];//右顶点

    triangleBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayData), webgl.STATIC_DRAW);
    
	//增加顶点颜色
    var jsArrayColor = [
         1.0, 0.0, 0.0, 
         0.0, 1.0, 0.0,//上顶点
         0.0, 0.0, 1.0,//左顶点
         1.0, 1.0, 0.0];//右顶点

    triangleColorBuffer = webgl.createBuffer();
    webgl.bindBuffer(webgl.ARRAY_BUFFER, triangleColorBuffer);
    webgl.bufferData(webgl.ARRAY_BUFFER, new Float32Array(jsArrayColor), webgl.STATIC_DRAW);
    
	//刷新
	window.setInterval("RotateTriangle()", interval);
}
</script>
</head>
<body οnlοad='Init()'>
<canvas id="myCanvas" style="border:1px solid red;" width='600px' height='450px'></canvas>
</body>
</html>