Canvas WebGL
2018-03-23 17:11:27 0 举报AI智能生成
知识点
作者其他创作
大纲/内容
Canvas
WebGL(3D)
绘制
绘制功能
gl.POINTS 点
gl.LINES 线
gl.TRIANGLES 三角面
绘制流程
1、获取顶点坐标数据（顶点着色器，画点）
2、图元装配（画三角形）
3、光栅化（片元着色器，即画像素点，填充色）
API（https://www.w3cschool.cn/webgl/vjxu1jt0.html）
纹理处理
gl.createTexture
gl.activeTexture
gl.texImage2D
gl.bindTexture
顶点处理
gl.bindBuffer
gl.bufferData
gl.enableVertexAttribArray
gl.vertexAttribPointer
gl.drawArrays
着色器处理
取值
gl.getUniformLocation
gl.getAttribLocation
传值
gl.uniform4fv
gl.uniformMatrix4fv
第三方库
基本的数学算法
向量算法
加
减
乘
除
取模
矩阵算法
矩阵应用
1、局部坐标 position
2、世界坐标 position * modelMatrix
3、视图坐标 position * modelMatrix * viewMatrix
4、屏幕坐标 position * modelMatrix * viewMatrix * projectMatrix
三大矩阵
平移矩阵
旋转矩阵
绽放矩阵
基本的矩阵运算
逆
秩
基本对象封装
相机
灯光
其它系统
相机系统
正交投影相机
透视投影相机
坐标系统
灯光系统
点光源
环境光源
平行光
面光源
聚光灯
物理系统
管理系统
场景管理
mesh 网格模型
外部导入模型
粒子管理
动画管理
平移动画
缩放动画
旋转动画
帧动画
插值动画
路径动画
曲线动画
跟随动画
材质管理
着色器
纹理
材质
基本材质
Lambert
Phong
法向
PBR
渲染系统
顶点数据
渲染器
2D辅助系统
2D绘制功能
直线
矩形
圆
弧线
贝赛尔曲线
THREEJS
Math（数学库）
Camera（相机）
Renderers（渲染器）
Scenes（屏幕）
Lights（灯光）
Geometries（几何图形）
Matrerials（材质）
Objects（图形对象）
Loaders（加载器）
Textures（纹理）
0 条评论
回复 删除
下一页
