【第二届字节青训营 - 寒假前端场】「WebGL 基础」の学习笔记

初识WebGL

WebGL定义

WebGL - Web API 接口参考 | MDN (mozilla.org)

  • 光栅(Raster):几乎所有的现代图形系统都是基于光栅来绘制图形的,光栅就是指构成图像的像素阵列。

  • 像素(Pixel):一个像素对应图像上的一个点,它通常保存图像上的某个具体位置的颜色等信息。

  • 帧缓存(Frame Buffer):在绘图过程中,像素信息被存放于帧缓存中,帧缓存是一块内存地址。

  • CPU(Central Processing Unit):中央处理单元,负责逻辑计算。

  • GPU(Graphics Processing Unit):图形处理单元,负责图形计算。

现代计算机运行分工:

1.轮廓提取/meshing(网格化)

2.光栅化(对应像素点)

3.帧缓存

4.渲染

png

数据
处理器
帧缓存
屏幕

GPU与CPU的区别:

CPU主要用来处理复杂的问题,比如涉及“流”的问题。
GPU适合前后计算步骤无依赖性,相互独立的计算场景。

GPU的长处:

  • GPU由大量的小运算单元构成
  • 每个运算单元只负责处理很简单的计算
  • 每个运算单元彼此独立
  • 因此所有计算可以并行处理

WebGL & OpenGL的区别:

WebGL & OpenGL

WebGL(全称全写Web Graphics Library)可以为HTML5 Canvas提供硬件3D加速渲染,可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了,还能创建复杂的导航和数据视觉化。WebGL技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂3D结构的网站页面。

WebGL基于OpenGL ES,它缺少常规OpenGL具有的许多功能,例如仅支持顶点和片段着色器。OpenGL具有WebGL所不具备的功能,例如几何体着色器,镶嵌细分着色器和计算着色器。

WebGL Startup过程

1.创建WebGL上下文

2.创建WebGL Program

3.将数据存入缓冲区

4.将缓冲区数据读取到GPU

5.GPU执行WebGL程序,输出结果

png

The Shaders

1.Vertex Shader
顶点着色器是一组指令代码,这组指令代码在顶点被渲染时执行。 同一时间内,只能激活一个顶点着色器。

2.Fragment Shader
通过编程控制编程控制屏幕上显示颜色的阶段叫做片元着色阶段。这个阶段处理OpenGL光栅化之后生成的独立片元,使用着色器计算片元的最终颜色和它的的深度值。

3.Rasterization
光栅化是判断某一部分几何体(点、线或者三角形)所覆盖的屏幕空间。因为屏幕是由一个个的像素点构成的,如果要画一条线,就要判断这条线在哪几个像素点表示

3d metrix

3D标准模型的四个齐次矩阵(mat4)
1.投影矩阵 Projection Matrix
2.模型矩阵 Model Matrix
3.视图矩阵View Matrix
4.法向量矩阵Normal Matrix

参考资料

The Book of Shaders

mesh-js/mesh.js: A graphics system born for visualization 😘. (github.com)

doodle.webgl.group

SpriteJS ~ Next - 下一代 SpriteJS

threejs.org

Shadertoy BETA

posted @   进击の小白们  阅读(87)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· 微软正式发布.NET 10 Preview 1:开启下一代开发框架新篇章
· 没有源码,如何修改代码逻辑?
· PowerShell开发游戏 · 打蜜蜂
· 在鹅厂做java开发是什么体验
· WPF到Web的无缝过渡:英雄联盟客户端的OpenSilver迁移实战
xxx2745天23小时12分15秒
点击右上角即可分享
微信分享提示