webgl参数

作者: Viewwei | 来源:发表于2021-05-06 09:16 被阅读0次

webgl参数
webgl 入门(二)
canvas day-02
WebGL漫游之旅（一）
threejs Light
threejs Light
WebGL
webgl
JavaScript第十五章节使用Canvas绘图（W
WebGL简易教程地理地形绘制

webgl顶点着色器的修改参数是通过attribute属性导出.attribute属性类似如 es6 中的 export.然后在通过 js 中的getAttribLocation获取到这个参数,在通过 js 中的vertexAttrib23f方法或者vertexAttrib23f的同族方法对attribute的属性进行修改

//获取属性
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position')

//设置属性
    gl.vertexAttrib3f(a_Position, 0, 0, 0)

webgl修改片元着色器.片元着色的参数和顶点着色器思路一样.只不过关键词不同.顶点的是 attribute,片元的是 uniform.但是 uniform 需要使用 p申明类似precision mediump float;修改类型.然后通过js 中的 gl.getUniformLocation获取参数,通过 gl.unform4f方法修改参数.也可以使用uniform4fv修改参数.uniform4fv需要传递的是一个数组.

实例代码如下

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <style>
        #canvas {
            /* width: 100px; */
            /* height: 100px; */
            /* background: red; */
        }
    </style>
    <body>
        <canvas id="canvas"></canvas>
    </body>
    <script id="vertexShader" type="x-shader/x-vertex">
        attribute vec4 a_Position;
        
        void main(){
            gl_Position = a_Position;
            //  必须使用浮点数
            gl_PointSize = 50.0;
        }
    </script>
    <script id="fragmentShader" type="x-shader/x-fragment">
        precision mediump float;
        uniform vec4 u_FragColor;
        void main(){
            gl_FragColor = u_FragColor;
        }
    </script>
    <script type="module">
    import { initShaders } from "./jsm/util.js";
    const canvas = document.getElementById('canvas')
    canvas.width = window.innerWidth
    canvas.height = window.innerHeight
    // 获取着色器文本
    const vsSource = document.querySelector("#vertexShader").innerText;
    const fsSource = document.querySelector("#fragmentShader").innerText;
    console.log(vsSource,fsSource)
    const gl = canvas.getContext('webgl')
    initShaders(gl, vsSource, fsSource)
    //声明颜色 rgba
    gl.clearColor(0, 0, 0, 1);
    //刷底色
    gl.clear(gl.COLOR_BUFFER_BIT);
    const a_Position = gl.getAttribLocation(gl.program, 'a_Position')
    const u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')
    gl.uniform4f(u_FragColor, 1, 0, 0, 1)
    //  获取传递数组
    // const arr = new 
    gl.uniform4fv(u_FragColor, new Float32Array([1, 0, 0, 1]))
    gl.vertexAttrib3f(a_Position, 0, 0, 0)
    gl.drawArrays(gl.POINTS, 0, 1)
    </script>
</html>