前端3D开发，你需要了解的知识汇总

# 前端基础

语言基础：要对html/css/javascript有一定了解；目前很多项目也使用typescript来代替javascript；大概了解vue/react/jquery等，WebGL项目一般都是一个前端项目的一部分，所有会结合前端框架进行传输和交互。

工程化：项目运行环境搭建，一般选择node.js环境或者搭建apache环境；项目规范化；项目测试等。

WebGL/Canvas/SVG：Canvas画布，html的一个元素，支持2D和3D绘图；WebGL，3D绘图协议，允许在Canvas上进行绘图；SVG，与Canvas没什么关系，是html用来绘制矢量图的标准。

计算几何

坐标系，矩阵运算，向量运算，四元数，旋转计算，

点线面的表达，多边形计算，基础几何体，样条曲线曲面，球面计算，

碰撞盒/碰撞体，八叉树算法，

渲染基础

渲染管线，着色方式，光栅化，

光照模型，相机投影计算，阴影生成原理，纹理映射/过滤，渲染顺序，

消隐技术，明暗处理，

着色器概念及应用，贴图，

缓冲区，片元，像素，纹理，深度，

alpha混合，模板测试，

mipmap，抗锯齿，颜色矫正，色调映射，HDR，

动画基础，

BRDF模型，

各类引擎

基于WebGL的3D渲染/游戏引擎：three.js, babylon.js, laya3d

基于WebGL的2D渲染/游戏引擎: cocos, laya, sprite.js,

非WebGL游戏引擎：Unity3D，Unreal

物理引擎: box2d.js, matter.js, cannon.js, oimo.js,

动画/数学库: matrix.js, tween.js,

3D数据文件

基础3D模型数据：索引，顶点，法线，纹理（uv），颜色，

空间数据：matrix，rotate，translate，scale，

动画数据：骨骼索引，骨骼，蒙皮权重，骨骼变换矩阵，等等。

应用方向

目前应用方向十分广泛，比如常见的VR看房，app小游戏，活动宣传动画，模拟器，地图等等。比较适合轻量级和传播广泛的应用程序，不适合中重度游戏开发。