08.缩放

作者: cmd_ts | 来源:发表于2020-03-20 15:07 被阅读0次
    clipboard.png

    顶点着色器需要加上 uniform mat4 u_xformMatrix, 存储缩放因子的坐标矢量。

    顶点坐标位置 : gl_Position = u_xformMatrix * a_Position

    缩放API : gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);

    u_xformMatrix : 缩放因子

    xformMatrix : 原始坐标

    <script type="shader" id="vertex">
            attribute vec4 a_Position;
            uniform mat4 u_xformMatrix;
            void main(){
                gl_PointSize = 2.0;
                gl_Position = a_Position * u_xformMatrix;
            }
    </script>
    
    var Sx = 2, Sy = 2, Sz = 1.0;
    var xformMatrix = new Float32Array([
        Sx,   0.0,  0.0,  0.0,
        0.0,  Sy,   0.0,  0.0,
        0.0,  0.0,  Sz,   0.0,
        0.0,  0.0,  0.0,  1.0
    ]);
    
    gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
    
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>cmd_webgl_study3</title>
    </head>
    <body>
    <!-- 1.创建webgl标签 -->
    <canvas id="webgl" width="500" height="500"></canvas>
    <script type="shader" id="vertex">
            attribute vec4 a_Position;
            uniform mat4 u_xformMatrix;
            void main(){
                gl_PointSize = 2.0;
                gl_Position = a_Position * u_xformMatrix;
            }
    </script>
    <script type="shader" id="fragment">
            precision mediump float;
            uniform vec4 vColor;
            void main(){
                gl_FragColor = vec4(0.0,1.0,0.0,1.0);
            }
        </script>
    <script src="./libs/webgl_libs.js"></script>
    <script>
        // 2.得到canvas element
        let canvas = document.getElementById('webgl');
        // 3.得到上下文对象 context
        let gl = canvas.getContext('webgl');
    
        //4.编写顶点着色器源代码、实际绘制的代码,GPU:描述一个顶点的大小、位置(3d坐标) 顶点着色器
        let vertex_shader_source = document.getElementById("vertex").innerHTML;
    
        //5.片元着色器源代码:描述一个点的颜色 片元着色器
        let fragment_shader_source = document.getElementById("fragment").innerHTML;
    
    
    
        let program = create_program(gl,vertex_shader_source,fragment_shader_source);
        //获取坐标点
        let apos = gl.getAttribLocation(program,'a_Position');
        let u_xformMatrix = gl.getUniformLocation(program, 'u_xformMatrix');
    
        var test = new Float32Array([
            .5,.3,
            .8,.3
        ]);
        console.log('test:',test);
    
        let asd = test*2;
        console.log('asd:',asd);
    
        var Sx = 2, Sy = 2, Sz = 1.0;
        var xformMatrix = new Float32Array([
            Sx,   0.0,  0.0,  0.0,
            0.0,  Sy,   0.0,  0.0,
            0.0,  0.0,  Sz,   0.0,
            0.0,  0.0,  0.0,  1.0
        ]);
    
        gl.uniformMatrix4fv(u_xformMatrix, false, xformMatrix);
    
        // 1.创建buf
        let buffer = gl.createBuffer();
        //2.绑定buf
        gl.bindBuffer(gl.ARRAY_BUFFER,buffer);
        //3.
        let data = new Float32Array([
            0.0,0.5,
            -0.5,0.0,
            0.5,0.0
        ]);
    
        //向缓冲区写入数据
        gl.bufferData(gl.ARRAY_BUFFER,data,gl.STATIC_DRAW);
        //将缓冲区对象分配给a_Position变量
        gl.vertexAttribPointer(apos,2,gl.FLOAT,false,0,0);
        gl.enableVertexAttribArray(apos);
    
        // 13.设置背景色
        gl.clearColor(1.0,0.0,0.0,1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        // 14.绘制
        gl.drawArrays(gl.TRIANGLES,0,3);
    
    </script>
    </body>
    </html>
    

    相关文章

      网友评论

          本文标题:08.缩放

          本文链接:https://www.haomeiwen.com/subject/zvujyhtx.html