webGL——绘制点

AwyaW1217

已于 2024-02-01 15:08:49 修改

阅读量329

点赞数 8

文章标签： webgl javascript 前端

于 2024-02-01 14:52:52 首次发布

本文链接：https://blog.csdn.net/mooooonster_QG/article/details/135974080

版权

webGL入门学习

在固定区域内任意点击，生成不同颜色的点

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>绘制点</title>
    </head>
    <body>
        <canvas height="500" width="300" id="oCanvas"></canvas>
        <script type="notjs" id="vertex">
            attribute vec2 a_position;
            attribute vec4 a_color;
            uniform vec2 screenSize;
            varying vec4 v_color;
             void main(){
                float x =a_position.x*2.0/screenSize.x-1.0;
                float y =1.0-(a_position.y*2.0/screenSize.y);
            gl_Position=vec4(x,y,0,1);
            gl_PointSize=10.0;
            v_color=a_color;
                        }
        </script>
        <!-- 着色器 -->
        <script type="notjs" id="fragment">
            precision mediump float;
            varying vec4 v_color;
             void main(){
            gl_FragColor=v_color;
                        }
        </script>
        <script>
            var oCanvas = document.getElementById('oCanvas')
            var gl = oCanvas.getContext('webgl')
            if (!gl) {
                alert('浏览器不知处webgl')
            }
            // 创建着色器函数
            function createShader(gl, type, source) {
                var shader = gl.createShader(type)
                // 向着色器中添加资源
                gl.shaderSource(shader, source)
                // 编译着色器代码
                gl.compileShader(shader)
                var sucess = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
                if (sucess) {
                    return shader
                }
                console.log(gl.getShaderInfoLog(shader))
            }

            var vetexStr = document.getElementById('vertex').innerText
            var fragmentStr = document.getElementById('fragment').innerText
            // console.log(vetexStr, fragmentStr)
            var vertexShader = createShader(gl, gl.VERTEX_SHADER, vetexStr)
            var fragmentShader = createShader(
                gl,
                gl.FRAGMENT_SHADER,
                fragmentStr
            )
            //创建程序
            function createProgram(gl, vertexShader, fragmentShader) {
                var program = gl.createProgram()
                //绑定着色器程序
                gl.attachShader(program, vertexShader)
                // 连接着色器程序
                gl.attachShader(program, fragmentShader)
                gl.linkProgram(program)
                var sucess = gl.getProgramParameter(program, gl.LINK_STATUS)
                if (sucess) {
                    return program
                }
                console.log(gl.getProgramInfoLog(shader))
            }
            var program = createProgram(gl, vertexShader, fragmentShader)
            gl.useProgram(program)
            gl.clearColor(0, 0, 1, 1)
            gl.clear(gl.COLOR_BUFFER_BIT)
            var a_position = gl.getAttribLocation(program, 'a_position')
            var screenSize = gl.getUniformLocation(program, 'screenSize')
            //获取color存储位置
            var a_color = gl.getAttribLocation(program, 'a_color')
            gl.uniform2f(screenSize, oCanvas.width, oCanvas.height)
            function randomColor() {
                var r = Math.random()
                var g = Math.random()
                var b = Math.random()
                var a = 0.5 + Math.random() * 0.5
                console.log(`(${r},${g},${b},${a})`)
                return { r, g, b, a }
            }
            function bindEvent() {
                var points = []
                oCanvas.onmousedown = function (e) {
                    gl.clearColor(0, 0, 1, 1)
                    gl.clear(gl.COLOR_BUFFER_BIT)
                    var x = e.offsetX
                    var y = e.offsetY
                    var color = randomColor()
                    console.log(x, y)
                    points.push({ x, y, color })
                    for (let i = 0; i < points.length; i++) {
                        var item_color = points[i].color
                        gl.vertexAttrib2f(a_position, points[i].x, points[i].y)
                        gl.vertexAttrib4f(
                            a_color,
                            item_color.r,
                            item_color.g,
                            item_color.b,
                            item_color.a
                        )
                        gl.drawArrays(gl.POINTS, 0, 1)
                    }
                }
            }
            bindEvent()
        </script>
    </body>
</html>