webgl工作原理

最新推荐文章于 2023-12-11 13:59:48 发布

BEconfidence

最新推荐文章于 2023-12-11 13:59:48 发布

阅读量594

点赞数

分类专栏： webgl

本文链接：https://blog.csdn.net/a197p/article/details/88649327

版权

webgl 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>webgl工作原理</title>
</head>

<link href="../css/webgl-tutorials.css" type="text/css" rel="stylesheet">
<link href="../css/main.css" type="text/css" rel="stylesheet">

<body>
<canvas id="c"></canvas>
<div id="uiContainer">
    <div id="ui">
        <div id="x"></div>
        <div id="y"></div>
        <div id="angle"></div>
        <div id="scaleX"></div>
        <div id="scaleY"></div>
    </div>
</div>

<script id="2d-vertex-shader" type="x-shader/x-vertex">
   attribute vec2 a_position;
   uniform mat3 u_matrix;
    varying vec4 v_color;
    void main(){
        gl_Position = vec4((u_matrix * vec3(a_position,1)).xy,0,1);
        //从剪裁空间转换到颜色空间
        //转换空间-1 到1
        //颜色空间0到1
        v_color = gl_Position*0.5 + 0.5;
    }
</script>
<script id="2d-fragment-shader"  type="x-shader/x-vertex">
    precision mediump float;
    varying vec4 v_color;
    void main(){
    gl_FragColor = v_color;
    }
</script>
<script src="../js/webgl-utils.js"></script>
<script src="../js/m3.js"></script>
<script src="../js/webgl-lessons-ui.js"></script>
<script src="js/webglprinciple.js"></script>

</body>
</html>

"use strict";

function main(){
    var canvas = document.getElementById("c");
    var gl = canvas.getContext("webgl");
    if(!gl){
        return;
    }

    //设置GLSL着色程序
    var program = webglUtils.createProgramFromScripts(gl,["2d-vertex-shader","2d-fragment-shader"]);

    //找到顶点缓存的位置
    var positionAttributeLocation = gl.getAttribLocation(program,"a_position");

    //查找uniforms 位置
    var matrixLocation = gl.getUniformLocation(program,"u_matrix");

    //创建一个buffer缓冲
    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER,positionBuffer);

    setGeometry(gl);

    var translation = [200,150];
    var angleInRadians=0;
    var scale=[1,1];

    drawScene();

    //设置ui
    webglLessonsUI.setupSlider("#x", {value: translation[0], slide: updatePosition(0), max: gl.canvas.width });
    webglLessonsUI.setupSlider("#y", {value: translation[1], slide: updatePosition(1), max: gl.canvas.height});
    webglLessonsUI.setupSlider("#angle", {slide: updateAngle, max: 360});
    webglLessonsUI.setupSlider("#scaleX", {value: scale[0], slide: updateScale(0), min: -5, max: 5, step: 0.01, precision: 2});
    webglLessonsUI.setupSlider("#scaleY", {value: scale[1], slide: updateScale(1), min: -5, max: 5, step: 0.01, precision: 2});

    function updatePosition(index) {
        return function(event, ui) {
            translation[index] = ui.value;
            drawScene();
        };
    }

    function updateAngle(event, ui) {
        var angleInDegrees = 360 - ui.value;
        angleInRadians = angleInDegrees * Math.PI / 180;
        drawScene();
    }

    function updateScale(index) {
        return function(event, ui) {
            scale[index] = ui.value;
            drawScene();
        };
    }

//绘制场景
    function drawScene(){
        webglUtils.resizeCanvasToDisplaySize(gl.canvas);

        //告诉webgl怎么从剪裁空间转换到像素空间
        gl.viewport(0,0, gl.canvas.width,gl.canvas.height);

        //清空 canvas
        gl.clear(gl.COLOR_BUFFER_BIT);

        //告诉webgl使用的程序
        gl.useProgram(program);

        //告诉webgl从缓冲中获取数据给顶点着色器
        gl.enableVertexAttribArray(positionAttributeLocation);

        //绑定到位置buffer缓冲
        gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);

        //告诉属性怎么从positionBuffer取数据
        var size=2; //每次迭代运行提取两个数据单元
        var type=gl.FLOAT;
        var normalize= false;
        var stride=0;
        var offset=0;
        gl.vertexAttribPointer(positionAttributeLocation,size,type,normalize,stride,offset);

        //计算matrix
        var matrix=m3.projection(gl.canvas.clientWidth,gl.canvas.clientHeight);
        matrix = m3.translate(matrix,translation[0],translation[1]);
        matrix = m3.rotate(matrix,angleInRadians);
        matrix = m3.scale(matrix,scale[0],scale[1]);

        //设置 matrix
        gl.uniformMatrix3fv(matrixLocation,false,matrix);

        //draw geometry
        var primitiveType = gl.TRIANGLES;
        var offset=0;
        var count=3;
        gl.drawArrays(primitiveType,offset,count);
    }
}
//定义一个三角形填充到缓冲里
function setGeometry(gl){
    gl.bufferData(gl.ARRAY_BUFFER,
        new Float32Array([
            0,-100,
            150,125,
            -175,100
        ]),gl.STATIC_DRAW);
}
main();