webGL编程指南第五章 MultiAttributeColorjs.js-Toy模板网

这篇具有很好参考价值的文章主要介绍了webGL编程指南第五章 MultiAttributeColorjs.js。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

我会持续更新关于wegl的编程指南中的代码。

当前的代码不会使用书中的缩写，每一步都是会展开写。希望能给后来学习的一些帮助

git代码地址：空

上一章节中只要使用了同一个buffer传递，位置与点的大小。

本案例中我们将学习新的varying。次变量可以对顶点进行赋值文章来源地址https://www.toymoban.com/news/detail-741225.html

<!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>
</head>

<body>

    <canvas id='canvas'></canvas>
    <script>
        let canvas = document.getElementById('canvas');
        let gl = canvas.getContext('webgl');
        //顶点着色器
        let vertexShaderSource = `
            attribute vec4 a_Position;
            attribute vec4 a_Color;
            varying vec4 v_Color;
            void main(){
                gl_Position = a_Position; 
                gl_PointSize = 10.0;
                v_Color = a_Color;
            }
        `
        //片元着色器
        let fragmentShaderSouce = `
            precision mediump float;
            varying vec4 v_Color;
            void main(){
                gl_FragColor = v_Color;
            }
        `
        //  创建顶点着色器
        let vertexShader = gl.createShader(gl.VERTEX_SHADER);
        gl.shaderSource(vertexShader, vertexShaderSource)
        gl.compileShader(vertexShader)
        //创建片元着色器
        let fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
        gl.shaderSource(fragmentShader, fragmentShaderSouce)
        gl.compileShader(fragmentShader)
        //创建渲染程序
        let program = gl.createProgram();
        gl.attachShader(program, vertexShader);
        gl.attachShader(program, fragmentShader);
        gl.linkProgram(program);
        //使用当前渲染程序
        gl.useProgram(program)


        //检查片元着色器的是否正确
        if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
            throw gl.getProgramInfoLog(program);
        }
        //三角形的坐标
        let verticesColors = new Float32Array([
            0.0,0.5,1.0,0.0,0.0, // 第一个三角形
            -0.5,-0.5,0.0,1.0,0.0, // 第二个三角形
            0.5,-0.5,0.0,0.0,1.0, // 第三个三角形
        ])
        var n = 3; // 顶点的个数 
        let size = verticesColors.BYTES_PER_ELEMENT
        //位置坐标变量
        let a_Position = gl.getAttribLocation(program, 'a_Position'); 
        //颜色
        let a_Color = gl.getAttribLocation(program, 'a_Color');

        //创建坐标的buffer
        let buffer = gl.createBuffer();
        //绑定buffer
        gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
        //将三角形的坐标数据放入缓冲区
        gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW)
        // a_Position 赋值
        gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, size*5, 0);
        // 启用a_Position
        gl.enableVertexAttribArray(a_Position);

        //创建顶点大小的buffer
        let colorBuffer = gl.createBuffer();
        //绑定buffer
        gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
        // 将点的颜色数据放入缓冲区
        gl.bufferData(gl.ARRAY_BUFFER, verticesColors, gl.STATIC_DRAW);
        // a_Color 赋值
        gl.vertexAttribPointer(a_Color, 3, gl.FLOAT, false,  size*5, size*2)
        // 启用a_Color
        gl.enableVertexAttribArray(a_Color);
        //绘制
        gl.clearColor(0.0, 0.0, 0.0, 1.0);
        gl.clear(gl.COLOR_BUFFER_BIT);
        //绘制点  从第0个开始，绘制4次
        gl.drawArrays(gl.POINTS, 0, n)

    </script>
</body>

</html>

到了这里，关于webGL编程指南第五章 MultiAttributeColorjs.js的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！