初级课程鼠标绘点

在初级课程中鼠标绘制点每个点的大小是写死的，怎么变成随机数的大小

发布于 2023-04-02 14:25:48

<!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>
        * {
            margin: 0;
            padding: 0;
        }
    </style>
    <script src="glMatrix-0.9.6.min.js"></script>
    <script>
        let vertexstring = `
        attribute vec4 a_position;
        uniform     mat4    proj;
        attribute float a_PointSize;
        attribute vec3 a_color;
        varying vec3 inColor;
        void main(void){
            gl_Position =proj *  a_position;
            gl_PointSize=a_PointSize;
            inColor = a_color;
        }
        `;
        let fragmentstring = `
        precision mediump float;
        varying vec3 inColor;
        void main(void){
          gl_FragColor = vec4(inColor,1.0);
        }
        `;//片元着色器
        function init() {
            initWebgl();
            initShader();
            initBuffer();
            draw();
        }
        var projMat = mat4.create();
        let webglDiv;
        let webgl;
        function initWebgl() {
            webglDiv = document.querySelector('#MyCancas');
            webglDiv.width = window.innerWidth;
            webglDiv.height = window.innerHeight;
            webgl = webglDiv.getContext('webgl');
            webgl.viewport(0, 0, webglDiv.clientWidth, webglDiv.clientHeight);
                        mat4.ortho(0, webglDiv.clientWidth, webglDiv.clientHeight, 0, -1.0, 1.0, projMat);
        }
        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);
            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) {
                points = [...points, e.clientX, e.clientY, 0, 1.0];
                colors = [...colors, Math.random(), Math.random(), Math.random()]
                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, 4, 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);



                let aPointSize = webgl.getAttribLocation(webgl.program, "a_PointSize");
                let siaze = Math.random() * 20;//问题所在点
                webgl.vertexAttrib1f(aPointSize, siaze);




                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 / 4);
            })
            let uniformProj = webgl.getUniformLocation(webgl.program, "proj");
            webgl.uniformMatrix4fv(uniformProj, false, projMat);
        }
        function draw() {//绘制
            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, 1);
        }
    </script>
</head>

<body onload="init()">
    <canvas id='MyCancas'></canvas>
</body>

</html>

关注者

0

被浏览

808

Jsonco 图形社区官方人员 2023-04-02

奔驰的蜗牛

你好，我测试你的代码是可以实现随机变化点的大小。其实实现方法有两种，你已经实现了一种。我在做一个总结：
1、就是在js里面通过生成随机数然后传递到shader里面面。
2、就是应用shader里面随机数生成方法。但是shader里面没有现成 Math.random()，需要自行编写，下面代码是我们经常用到的随机数生成方法，该函数需要传递进去值，返回随机结果，一般我们传入time。然后范围一个随机结果。

float rand(float co) { return fract(sin(co*(91.3458)) * 47453.5453); }

如果按照你的问题来说，如果你想实现鼠标点击去绘制不同大小的点，我提供一个思路，你尝试去思考一下。
首先你需要在鼠标点击事件onmousedown 方法里面去生成随机数Math.random()，并且将随机数传到shader里面。之后，再clearColor画布，最后再应用draw方法去绘制points即可。
你可以参考这里的在线代码动态绘制点
另外再补充下就是PointSize的值的范围是从 0到 gl_MaxPointSize。在大多数情况下，gl_MaxPointSize 的值应该至少为 1024，因此可以将 gl_PointSize 设置为任意从 0 到 1024 的值。但是，支持的最大点大小取决于你的图形硬件，你电脑硬件要不是很好，可能会比这个值小。

1 个回答

撰写答案

请登录后再发布答案，点击登录

付费查看:

￥清除

1. 如果设定了付费查看，则此回答只有提问者、回答者和管理员可以查看
2. 如果提问者采纳了此回答，则付费查看生效(会员需要支付你设定的费用才能查看)，如果采纳了其它答案，付费查看失效(此时全体可见)
3. 如果提问者在 7 天后仍未采纳最佳答案，则所有付费查看失效(此时全体可见)

登录注册新账号

关于作者

dingxinfeng

这家伙很懒，什么也没写！

提问

回答

被采纳

0

关注TA

发私信

相关问题

热门问题

1

UE5中，新建关卡为什么是漆黑一片？如何设置？

2

Cesium展示3D格点数据（原始数据为nc格点数据）进行体绘制渲染思路

3

煤矿三维数字点云项目需求

4

webgl怎么添加git动图呢

5

最近想学习webgl，不知道从哪里入手，请问有什么具体学习路线嘛？

6

threejs怎么生成antv或者deckgl具有聚合效果的热力图

7

Threejs/webgl高级人才招聘

8

cesium绘制路线,然后模型根据路线运动动画

9

视口设置有区别导致帧缓冲的纹理渲染不出来

10

请教一下关于cesium的GIS方面的问题，街道数据的获得

热门标签

shader

WebGL

cesium

threeJS

gis vue3 招聘

glsl 地图数据 vite 城市gis VUE

模型绘制点 UE5 自定义着色器 vue3-ts-cesium-map-show cesium贴图材质 TvT 点击事件 useTresContext 实现热力图求助三维图表 html css

webGPU 学习线路 GeoJson dwg模型加载初级课程鼠标绘点 drawElements纹理图形学基础图层建模 blender vscode vec3 fastadmin导入插件 three MacOS 升级Cesium版本着色器 _model._sourcePrograms为空 3D格点数据算法 mapv glmatrix mat4.orthp 资源

推荐达人

0个答案 0次被采纳

七个隆咚锵

七个隆咚锵

2个答案 0次被采纳

sunny

2个答案 2次被采纳

TuringP

7个答案 5次被采纳

Jsonco

33个答案 13次被采纳

发布
问题

手机
浏览

扫码手机浏览