WebGL-Learning

WebGL入门

1. WebGL的hello-world

• WebGL基础概念
• WebGL的工作原理
• 着色器和GLSL

绘制基本图形

2. WebGL中的数学基础

• 绘制三角形
• 绘制其他图形
• 使用方程、矩阵进行平移、缩放、旋转

动画基础

• 多次变换结合起来
• 实现简单的动画

颜色纹理

• 顶点着色器和片元着色器光栅化过程
• 如何将图像纹理贴到图形模型表面
• 图像处理-滤镜

GLSL着色器语言

• 数据、变量、变量类型
• 矢量、矩阵、结构体、数组和取样器
• 运算符、流程控制和函数
• attribute、uniform、varying
• 精度限定字
• 预处理过程和编程准则

三维世界

• 三维空间的观察者
• 如何控制可视的三维空间体积
• 裁剪
• 物体的前后关系
• 绘制一个立方体

光照

• 点光源光、平行光和环境光
• 漫反射和环境反射
• 着色细节

高级技术

工具库

• svg库Snap.svg
• 2D渲染引擎Fabric.js、Pixi.js
• 2D手绘风格Roughjs
• 2D/3D引擎SpriteJS、P5.js
• 3D引擎Three.js、Babylon.js
• 图表库Echarts、Chart.js、Highcharts、AntV G2、QCharts、AntV F2、D3.js、Vega
• 图可视化Mermaid.js、Sigma.js、AntV G6
• 底层流程库Dagre
• 地理信息可视化MapBox、MapTalks、Leaflet.js、MapV、AntV L7、d3-geo
• 数字孪生应用Unity、虚幻引擎