webgl入门实例-04绘制点-通过uniform变量传入点的颜色

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>webgl入门实例-04绘制点-通过uniform变量传入点的颜色</title>
</head>

<body onload="main()">

    <canvas id="webgl" width="400" height="400"></canvas>

    <!-- Vertex shader program -->
    <script id="VSHADER_SOURCE" type="text/plain">
        void main()	{
            gl_Position = vec4(0.0, 0.0, 0.0, 1.0);
            gl_PointSize = 10.0;
        }
    </script>

    <!-- Fragment shader program -->
    <script id="FSHADER_SOURCE" type="text/plain">
        precision mediump float;
        uniform vec4 u_FragColor; // uniform变量
        void main()	{
            gl_FragColor = u_FragColor;
        }
    </script>

    <script>
        function main() {
            var VSHADER_SOURCE = document.getElementById("VSHADER_SOURCE").textContent
            var FSHADER_SOURCE = document.getElementById("FSHADER_SOURCE").textContent
            var canvas = document.getElementById("webgl");
            var gl = canvas.getContext("webgl");
            initShaders(gl, VSHADER_SOURCE, FSHADER_SOURCE)

            // 获取u_FragColor变量在内存中的位置
            var u_FragColor = gl.getUniformLocation(gl.program, 'u_FragColor')

            // 将颜色传递给片元着色器中的uniform变量
            var rgba = [0.5, 1, 0.0, 1.0]
            gl.uniform4f(u_FragColor, rgba[0], rgba[1], rgba[2], rgba[3]);

            gl.clearColor(0.0, 0.0, 0.0, 1.0);
            gl.clear(gl.COLOR_BUFFER_BIT);
            gl.drawArrays(gl.POINTS, 0, 1);

        }

        function initShaders(gl, vshader, fshader) {
            var program = createProgram(gl, vshader, fshader);
            if (!program) {
                console.log("Failed to create program");
                return false;
            }

            gl.useProgram(program);
            gl.program = program;

            return true;
        }
        function createProgram(gl, vshader, fshader) {
            var vertexShader = loadShader(gl, gl.VERTEX_SHADER, vshader);
            var fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fshader);
            if (!vertexShader || !fragmentShader) {
                return null;
            }
            var program = gl.createProgram();
            if (!program) {
                return null;
            }
            gl.attachShader(program, vertexShader);
            gl.attachShader(program, fragmentShader);
            gl.linkProgram(program);
            var linked = gl.getProgramParameter(program, gl.LINK_STATUS);
            if (!linked) {
                var error = gl.getProgramInfoLog(program);
                console.log("Failed to link program: " + error);
                gl.deleteProgram(program);
                gl.deleteShader(fragmentShader);
                gl.deleteShader(vertexShader);
                return null;
            }
            return program;
        }
        function loadShader(gl, type, source) {
            var shader = gl.createShader(type);
            if (shader == null) {
                console.log("unable to create shader");
                return null;
            }
            gl.shaderSource(shader, source);
            gl.compileShader(shader);
            var compiled = gl.getShaderParameter(shader, gl.COMPILE_STATUS);
            if (!compiled) {
                var error = gl.getShaderInfoLog(shader);
                console.log("Failed to compile shader: " + error);
                gl.deleteShader(shader);
                return null;
            }
            return shader;
        }
    </script>

</body>

</html>
posted @ 2025-03-22 15:27  青花·  阅读(2)  评论(0)    收藏  举报  来源