【WebGL学习日报】22/09/01 : 绘制点

收获

attribute与uniform：存储限定符，他表示数据将由外部传给着色器程序，而不用事先写死，使用前需要先获取变量的存储地址
获取鼠标在webgl中的坐标：浏览器和canvas坐标系原点在左上角，webgl坐标系原点在中心并且最大为1（1,1,1），需转换后使用

/**- 获取点在canvas内的x坐标：clientX-rect.x- 将canvas坐标系原点平移到canvas中心后的x坐标：(clientX-rect.x) - rect.width/2 - webgl坐标系xy最大为1，所以将canvas的x坐标除以x坐标最大值：((clientX - rect.x) - rect.width / 2) /(rect.width / 2)*/
let mouseXY = (e, type = 'webgl') => {let { clientX, clientY } = elet rect = e.target.getBoundingClientRect()let x = ((clientX - rect.x) - rect.width / 2) /(rect.width / 2)let y = (rect.height / 2 - (clientY - rect.y)) / (rect.height / 2)return [x, y]
}

新的理解：Element.getBoundingClientRect()返回值中的top/y和left/x 其实就是元素的原点在浏览器客户区client中的坐标
顶点着色器进行的是逐顶点的操作，片元着色器进行的逐片元的操作
缓冲区对象以及使用流程：可存入多个顶点数据，供着色器使用，以创建更复杂的图像。
1. 创建缓冲区对象 gl.createBuffer()
2. 绑定缓冲区对象 gl.bindBuffer()
3. 将数据写入缓冲区 gl.bufferData()
4. 将缓冲区分配给一个attribute变量 gl.vertexAttribPointer()
5. 开启attribute变量 gl.enbleVertexAttribArray()

总结

学习webgl已有3天，对webgl的作用和绘图的流程有了一定的理解，可以使用webgl响应点击事件绘制单个点，一只脚已经踏进来，干吧得
遇到的问题：

- 控制台报错入参1类型不为webgl_program，检查js代码未发现问题，后排查原来是片段着色器的问题，未设置浮点数精度，着色器代码出错并不会直接打印在控制台，坑！
到底什么是缓冲区？

22-09-02 : 内存中一块预留的存储空间，在webgl中，缓冲区可以用来给顶点着色器传入多个顶点数据以绘制复杂图形

明日计划： 绘制及变换三角形，理解清除缓冲区

【WebGL学习日报】22/09/01 : 绘制点相关推荐

WebGL学习笔记第三章绘制和变换三角形
工作学习总结 22.09.27 day1
多数据源操作数据时,要对每一个数据库都通过指定Bean的name的形式配上对应jdbcTemplate,否则找不到对应的数据库. 自动装配时,通过@Resource(name="&quo ...
WebGL（三）——学习Canvas及简单图形绘制
WebGL(三)--学习Canvas及简单图形绘制 Canvas简介 canvas是HTML5新增的一个可以使用javascript脚本在其中绘制图像的HTML元素(容器),它可以用来制作图像.动画, ...
原生webgl学习（四） WebGL绘制矩形（一）
本专栏所有文章示例代码均可在我的gitee码云上获取,读者可自行下载:https://gitee.com/babyogl/learnWebGL:本节代码在文件夹chapter-02里面的color-t ...
学习日报 1028 分支结构 if分支语句
学习日报 1028 分支结构 if分支语句 https://cloud.189.cn/t/FBzQbeRnYFbi java包包的基本使用 java包的基本使用_pyhui的技术博客-CSDN博客 ...
WebGL学习之纹理盒
原文地址:WebGL学习之纹理盒我们之前已经学习过二维纹理 gl.TEXTURE_2D,而且还使用它实现了各种效果.但还有一种立方体纹理 gl.TEXTURE_CUBE_MAP,它包含了6个纹理代表 ...
WebGL学习(1) - 三角形
原文地址:WebGL学习(1) - 三角形还记得第一次看到canvas的粒子特效的时候,真的把我给惊艳到了,原来在浏览器也能做出这么棒的效果.结合<HTML5 Canvas核心技术>和网 ...
深度学习（22）神经网络与全连接层五: 误差计算
深度学习(22)神经网络与全连接层五: 误差计算 1. MSE 2. Entropy(熵) 3. Cross Entropy 4. Binary Classification 5. Single ou ...
我的webgl学习之路（一）
我的webgl学习之路 (一) 做项目中偶然需要移动端3d展示,所以学习了threejs;但是有着各种限制,还有就是项目要达到好的效果肯定是需要后期处理等等,所以展开了我学习webgl之路,我刚开始毫 ...

【WebGL学习日报】22/09/01 : 绘制点

收获

总结

【WebGL学习日报】22/09/01 : 绘制点相关推荐

最新文章

热门文章