图形渲染(Rendering)

教程3DWebGL

GPU(显卡)硬件渲染

硬件渲染和软件渲染

WebGL 是基于硬件渲染的

服务端渲染和客户端渲染

WebGL 是在客户端渲染的

WegGL 优势

• JavaScript：可以访问 DOM，可以与其他网页框架（JQeury，Vue.js，React.js）集成
• 自动内存管理：借助于 JavaScript 的内存回收机制
• 跨平台：无论是 PC 端的浏览器，还是手机端的浏览器，目前都普遍支持 JavaScript 和 WebGL
• 性能：由于 WebGL 是借助于设备的硬件（GPU 显卡）来渲染的，所以性能几乎接近于 OpenGL 或 Direct3D 本地应用。
• 无需编译：因为 WebGL 是用 JavaScript 编写的，所以无需编译就可以直接运行。这也使得我们非常容易地修改代码立即看到效果。

保留模式(Retained Mode)和立即(Immediate Mode) 渲染

WebGL 是立即模式

WebGL 应用中的 3D 元素

• <canvas>
• 模型对象：由三角形组成的模型实体（车、人物、树木等等）
• 光
• 摄像机

<canvas>

context 2d

State Machine

A WebGL context can be understood as a state machine: once you modify attributes, the modifications persist until later modifications. At any point, you can query the state of these attributes to determine the current state of your WebGL context.

context 3d: clearColor

• keyboard number 1 => green
• keyboard number 2 => blue
• keyboard number 3 => random color
• keyboard number 4 => get color

加载 3D 场景