webgl中顶点着色器的varying变量，使用方法。

最新推荐文章于 2024-09-22 15:33:00 发布

小秧@

最新推荐文章于 2024-09-22 15:33:00 发布

阅读量667

点赞数

分类专栏： webgl three.js 文章标签：着色器

本文链接：https://blog.csdn.net/webMinStudent/article/details/122015019

版权

webgl 同时被 2 个专栏收录

15 篇文章

订阅专栏

three.js

13 篇文章

订阅专栏

1.webgl中顶点着色器的varying变量，使用方法。

1.在webgl中我们在顶点着色器中使用varying声明了的变量
2.那么只有在片源着色器张也使用varying声明了同种类型的变量了
3.varying变量的作用是从顶点着色器向片元着色器传输数据。

1.顶点着色器

const VSHADER_SOURCE = 
        'attribute vec4 a_Position;\n'+
        'attribute vec4 a_Color;\n'+
        'varying vec4 c_Color;\n'+
        'void main() { \n'+
        '   gl_Position = a_Position;\n'+
        '   gl_PointSize = 10.0;\n'+
        '   c_Color = a_Color;\n'+
        '}\n';

在顶点着色器中的代码，中我们声明了 varying vec4 c_Color, 以及 attribute vec4 a_Color。
而且在main函数中将 c_Color = a_Color;

2.在片元着色器中

onst FSHADER_SOURCE = 
        'precision mediump float;\n' +
        'varying vec4 c_Color;\n'+
        'void main() { \n' +
        '   gl_FragColor = c_Color;\n' +
        '}\n';

我们声明了 varying vec4 c_Color;
并且将他赋值给了 gl_FragColor = c_Color;

3.precision mediump float的意思是

这一次的片段着色器中的第一行，出现了一个陌生的precision，这个precision是用来指定数值的精确度的关键字，紧接着跟在precision后面的是精确度修饰符
这个修饰符有三种，简单点说就是指定精确度为上，中，下。其实，变量中使用的小数发生变化时（也就是说，处理的数值的位数增加或是减少），根据运行的环境不同得到的结果是不太统一的。
lowp ：精确度低
mediump：精确度中
highp ：精确度高
上面的片段着色器代码中，precision后面紧接着写的是mediump float，这是说，让片段着色器中的float类型的数值的精确度都按照mediump来用。
不管在片段着色器中有没有做什么特殊的处理，首先要将precision相关的设定写上，否则在编译着色器的时候会出错。这就像魔法的咒语一样，逃不掉的。

4.实例代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #canvas {
            height: 300px;
            width: 300px;
        }
    </style>
</head>
<body>
    <canvas id="canvas"></canvas>
    <script>
        // 获取webGL执行的执行上下文
        // const VSHADER_SOURCE = 
        // 'void main() { \n'+
        // '  gl_Position = vec4(0.0, 0.0, 0.0, 1.0);\n' +
        // '  gl_PointSize = 5.0;\n'+
        // '}\n';
        const VSHADER_SOURCE = 
        'attribute vec4 a_Position;\n'+
        'attribute vec4 a_Color;\n'+
        'varying vec4 c_Color;\n'+
        'void main() { \n'+
        '   gl_Position = a_Position;\n'+
        '   gl_PointSize = 10.0;\n'+
        '   c_Color = a_Color;\n'+
        '}\n';
        const FSHADER_SOURCE = 
        'precision mediump float;\n' +
        'varying vec4 c_Color;\n'+
        'void main() { \n' +
        '   gl_FragColor = c_Color;\n' +
        '}\n';
        const gl = canvas.getContext('webgl');
        function createshader(gl, type, source) {
            const shader = gl.createShader(type); // 创建type类型的着色器(顶点着色器，片源着色器);
            gl.shaderSource(shader, source); // 向shader设置GLSL代码，其实就是设置数据源。
            gl.compileShader(shader); // 开始编译shader(着色器);
            const compileStatus = gl.getShaderParameter(shader, gl.COMPILE_STATUS); status
            if (!compileStatus) {
                const err = gl.getShaderInfoLog(shader); // 获取编译 shader的信息。
                console.log(`着色器编译报错的信息为:${err}`);
                gl.deleteShader(shader); // 编译报错，就要删除对应的着色器(shader);
                return null
            }
            return shader;
        }
        function createProgram(gl, vshader, fshader) {
            const vertexShader = createshader(gl, gl.VERTEX_SHADER, vshader);
            // return;
            const fragmentShader = createshader(gl, gl.FRAGMENT_SHADER, fshader);
    
            if (!vertexShader || !fragmentShader) {
                console.log('着色器创建失败')
                return null;
            }
            const program = gl.createProgram(); // 创建一个webgl程序吧
            gl.attachShader(program, vertexShader); // 为 program绑定一个着色器
            gl.attachShader(program, fragmentShader); // 为 program绑定一个着色器
            gl.linkProgram(program);
            const linkState = gl.getProgramParameter(program, gl.LINK_STATUS); // 获取program与着色器链接的状态。
            if (!linkState) {
                const err = gl.getProgramInfoLog(program); // 获取program的链接信息
                console.log(err, 'sd')
                console.log(`链接报错的原因是${err}`)
                gl.deleteShader(vertexShader); // 删除顶点着色器
                gl.deleteShader(fragmentShader); // 删除片源着色器
                gl.deleteProgram(program); // 删除program;
                return null;
            }
            return program
        }
        function initShader() {
            const program = createProgram(gl, VSHADER_SOURCE, FSHADER_SOURCE);
            if (!program) {
                console.log('程序创建失败');
                return false;
            }
            gl.useProgram(program);
            gl.program = program;
        }
        initShader();
        function onTime(data) {
            const size = data.BYTES_PER_ELEMENT;
            // 1.创建一个缓冲区
            const vertexBuffer = gl.createBuffer(); 
            gl.bindBuffer(gl.ARRAY_BUFFER,vertexBuffer); // 将已经创建的缓冲区，绑定到webgl系统中存在的目标。
            gl.bufferData(gl.ARRAY_BUFFER, data, gl.STATIC_DRAW); // 将数据写入缓冲区，是在gl.ARRAY_BUFFER中的缓冲区
            // 获取a_Position这个变量的存储地址.
            const a_Position = gl.getAttribLocation(gl.program, 'a_Position');
            console.log(a_Position, 'a_Position')
            // const a_Color = gl.getAttribLocation(gl.program, 't_Color')
            var a_Color = gl.getAttribLocation(gl.program, 'a_Color');
            console.log(a_Color, 'a_Color')
            // 为a_Position这个变量存储的地址，分配缓冲区数据
            gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, size * 5, 0);
            gl.enableVertexAttribArray(a_Position);
            gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false, size * 5, size * 2)
            gl.enableVertexAttribArray(a_Color)
            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.POINIS, 0, 3);
        }
        const data = new Float32Array([
            0.0,0.5, 1.0, 0.0, 0.0,
            0.5,0.0, 0.0, 1.0, 0.0,
            -0.5,0.0, 0.0, 0.0, 1.0
        ])
        onTime(data)
        // gl.clearColor(0.0, 0.0, 1.0, 1.0);
        // gl.clear(gl.COLOR_BUFFER_BIT);
        // gl.drawArrays(gl.POINIS, 0, 1);
    </script>
</body>
</html>

效果图
在这里插入图片描述