WEBGL(4):动态绘制点并根据详细自定义颜色

1 实现代码

复制代码
<!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>
    <script src="js/glMatrix-0.9.6.min.js"></script>
    <script>
        let vertexstring = `
        attribute vec3 a_position;
        uniform     mat4    proj;
        attribute vec3 a_color;
        varying vec3 inColor;
        void main(void){
            gl_Position = vec4(a_position,1.0)  ;
            gl_PointSize=60.0;
            inColor = a_color;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        varying vec3 inColor;
        void main(void){
          gl_FragColor = vec4(inColor,1.0);
        }
        `;
        var projMat4 = mat4.create();
        var webgl;
        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }
        function initWebgl() {
            let webglDiv = document.getElementById('myCanvas');
            webgl = webglDiv.getContext("webgl");
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
            mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat4)
        }
        function initShader() {

            let vsshader = webgl.createShader(webgl.VERTEX_SHADER);
            let fsshader = webgl.createShader(webgl.FRAGMENT_SHADER);

            webgl.shaderSource(vsshader, vertexstring);
            webgl.shaderSource(fsshader, fragmentstring);

            webgl.compileShader(vsshader);
            webgl.compileShader(fsshader);
            if (!webgl.getShaderParameter(vsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(vsshader);
                alert(err);
                return;
            }
            if (!webgl.getShaderParameter(fsshader, webgl.COMPILE_STATUS)) {
                var err = webgl.getShaderInfoLog(fsshader);
                alert(err);
                return;
            }
            let program = webgl.createProgram();
            webgl.attachShader(program, vsshader);
            webgl.attachShader(program, fsshader)

            webgl.linkProgram(program);
            webgl.useProgram(program);

            webgl.program = program
        }
        var points = [];
        var colors=[];
        function initBuffer() {
            let aPsotion = webgl.getAttribLocation(webgl.program, "a_position");
            let aColor = webgl.getAttribLocation(webgl.program, "a_color");
            
            document.addEventListener("mousedown", function (e) {
                debugger
                let x = e.clientX;
                let y = e.clientY;
                let rect = e.target.getBoundingClientRect();
                let pointx = ((x - rect.left) - 512) / 512;
                let pointy = (350 - (y - rect.top)) / 350;
                points.push(pointx);
                points.push(pointy);
                points.push(0);
                if(pointx>0&&pointy>0){
                    colors.push(1.0);  
                    colors.push(0.0);  
                    colors.push(0.0);  
                }else if(pointx<0&&pointy>0){
                    colors.push(0.0);  
                    colors.push(1.0);  
                    colors.push(0.0);  
                }else if(pointx<0&&pointy<0){
                    colors.push(0.0);  
                    colors.push(0.0);  
                    colors.push(1.0); 
                }else{
                    colors.push(0.0);  
                    colors.push(1.0);  
                    colors.push(1.0); 
                }
                let pointPosition = new Float32Array(points);
                let pointBuffer = webgl.createBuffer();
                webgl.bindBuffer(webgl.ARRAY_BUFFER, pointBuffer);
                webgl.bufferData(webgl.ARRAY_BUFFER, pointPosition, webgl.STATIC_DRAW);
                webgl.enableVertexAttribArray(aPsotion);
                webgl.vertexAttribPointer(aPsotion, 3, webgl.FLOAT, false, 0, 0);

                let pointColor = new Float32Array(colors);
                let pointColorBuffer = webgl.createBuffer();
                webgl.bindBuffer(webgl.ARRAY_BUFFER, pointColorBuffer);
                webgl.bufferData(webgl.ARRAY_BUFFER, pointColor, webgl.STATIC_DRAW);
                webgl.enableVertexAttribArray(aColor);
                webgl.vertexAttribPointer(aColor, 3, webgl.FLOAT, false, 0, 0);




                webgl.clearColor(0.0, 0.0, 0.0, 1.0);
                webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);
                webgl.drawArrays(webgl.POINTS, 0, points.length / 3);
            })



            let uniformProj = webgl.getUniformLocation(webgl.program, "proj");
            webgl.uniformMatrix4fv(uniformProj, false, projMat4);
        }
        function draw() {
            webgl.clearColor(0.0, 0.0, 0.0, 1.0);
            webgl.clear(webgl.COLOR_BUFFER_BIT | webgl.DEPTH_BUFFER_BIT);

        }
    </script>
</head>

<body onload="init()">
    <canvas id='myCanvas' width="1024" height='700'></canvas>
</body>

</html>

2 实现效果

根据鼠标点击的坐标,实现方块颜色进行变化

相关推荐
爱看书的小沐16 小时前
【小沐杂货铺】基于Three.js渲染三维风力发电机(WebGL、vue、react、WindTurbine)
javascript·vue.js·webgl·three.js·opengl·风力发电机·windturbine
郝学胜-神的一滴1 天前
Three.js光照技术详解:为3D场景注入灵魂
开发语言·前端·javascript·3d·web3·webgl
linweidong2 天前
让低端机也能飞:Canvas/WebGL/Viz 分层、降级渲染与数据抽样策略
前端框架·webgl·canvas·前端动画·前端面经·css渲染·动画优化
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(一):Batched Geometry 助你轻松渲染百万实体
前端·webgl·three.js
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(三):高性能 CAD 文本渲染背后的隐藏工程
前端·webgl·three.js
CAD老兵4 天前
打造高性能二维图纸渲染引擎系列(二):创建结构化和可扩展的渲染场景
前端·webgl·three.js
王维志6 天前
使用Asp.Net WebApi(.net 8)托管Unity WebGL
unity·游戏引擎·webgl
Zuckjet_6 天前
第 7 篇:交互的乐趣 - 响应用户输入
前端·javascript·webgl
xhload3d6 天前
智慧钢厂高炉冶炼仿真分析 | 图扑数字孪生
3d·智慧城市·html5·webgl·数字孪生·可视化·热力图·智慧工厂·工业互联网·工业组态·高炉炼铁·数字工厂·高炉炉体·智慧高炉·高炉
猪哥帅过吴彦祖6 天前
第 8 篇:更广阔的世界 - 加载 3D 模型
前端·javascript·webgl