webgl 学习小结 彩色小立方体

原文链接: webgl 学习小结 彩色小立方体

上一篇: windows 用scoop 安装 starship 一个比较小众的命令行

下一篇: webrtc 全屏截图

找了半天, 好像这个15年的视频还行...

https://www.bilibili.com/video/BV14T4y1G7P8?p=4&spm_id_from=pageDriver

https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-fundamentals.html

https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-tips.html#tabindex

https://webglfundamentals.org/webgl/lessons/zh_cn/webgl-smallest-programs.html

https://www.shadertoy.com/

这个适合拓展看一下

https://www.bilibili.com/video/BV1zT4y1T7FN

https://www.bilibili.com/video/BV1Cp4y1Y7gz

http://madebyevan.com/webgl-water/

http://www.songho.ca/opengl/

照着mdn终于搞出来了....

渲染流水线, 一般情况下, 我们只干预vs和fs阶段, vs每个顶点运行一次, fs每个像素运行一次, 两个程序可以通过uniform变量来共享值, 顶点之间数据按照线性插值计算

varying 在vs中经过插值后传到fs中

uniform两个都能访问的常量

webgl 和canvas类似, 是状态机式的绘图, 没有显示修改时, 使用上一次的状态

webgl 坐标系是笛卡尔坐标系, 也就是原点在中间, x右,y上, 范围-1-1, 和canvas和html的不太一样, 他们都是原点在左上角, x右,y下, 并且范围都是基于像素的

每次绘制的都是直线和三角形, 其他形状需要进行拼接

顶点缓冲区 : 三个float或六个float坐标+法向量, 如果有法向量, 那么绘制时需要指定偏移量

索引缓冲区: 优化点集数组, 比如画一个矩形, 使用两个三角形拼接, 那么需要6个点, 如果使用索引数组只需要四个点, 而且短整形只占两个字节, 比float32也要少,处理起来也快, 顶点数组使用Uint8Array, 顶点上线2^16 ==> 65536个

纹理: vs 顶点渲染, fs片段渲染,

矩阵:

帧缓冲: 保存渲染中间结果

深度缓冲: 主要解决层级遮挡问题

颜色缓冲:  存储颜色值, 没用到...

模板缓冲: 可以理解为mask, 根据一个值进行比较, 由比较结果确定是否进行更新, 只有通过模板测试的 才会保存到颜色缓冲区

只需要修改顶点颜色, 就能展示彩色的立方体了