WebGL入门学习｜ 青训营笔记

sleep_earily
106 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第13天

webGl入门

WebGL是一种渲染方式，使用GPU渲染; 需要了解WebGL原理才能使用

准备知识

  1. 名词 image.png

  2. 图形系统工作流程

  • 轮廓提取
  • 光栅化
  • 帧缓存
  • 渲染

渲染过程是管道，数据放到缓存区后批量处理

CPU:很宽的一个管道 GPU:大量小运算范媛

image.png

WebGL是利用GPU绘图的API

  1. WebGL初始化

image.png

分为顶点阻塞器和边缘阻塞器

webgl对所有像素点同时计算颜色，根据每个顶点的颜色进行计算

  1. 绘制多边形

webGl有几种基础图源，复杂图形通过进行三角剖分分成多个三角形绘制

有几种剖分算法：Earcut

3D图形也是通过三角剖分，但是不是实时渲染，将已经剖分好的数据导入webgl

  1. 通过transform方式进行移动

旋转和平移是线性变换，可以通过线性矩阵相乘的方式不断计算 image.png

image.png

最终2d图像通过3x3矩阵实现线性变换

  1. 3D移动

image.png

投影矩阵：定义坐标系——缩放旋转坐标系 模型矩阵：对模型本身进行变化 视图矩阵：对摄像机的视角进行变化 法向量矩阵：定义每个面的法向量进行计算——光线照射角度

  1. 参考资料

image.png

shaderToy是比较有趣的库

实践webgl

out vec4 fragColor;

uniform vec2 dd_resolution;
void main(){
  vec2 st = gl_FragCoord.xy / dd_resolution;
  // fragColor = vec4(st, 0.0, 1.0);//色谱图

  //黑白图
  fragColor.rgb = step(0.5, st.x)* vec3(1.0);
  fragColor.a = 1.0;
}

补充资料： # 充分理解WebGL

avatar
文章
阅读
粉丝