WebGL实践

变换

• 顶点着色器加减平移
  • 源码地址:src/translate1.html
  • 预览效果
• glmatrix 矩阵平移
  • 源码地址:src/translate2.html
  • 预览效果
• 2D 旋转
  • 源码地址:src/rotate2D.html
  • 预览效果
• 3D 旋转
  • 源码地址:src/rotate3D.html
  • 预览效果
• 顶点着色器缩放
  • 源码地址:src/scale1.html
  • 预览效果
• glmatrix 矩阵缩放
  • 源码地址:src/scale2.html
  • 预览效果

投影与摄像机

• 正交投影
  • 源码地址:src/ortho.html
  • 预览效果
• 透视投影
  • 源码地址:src/perspective.html
  • 预览效果
• 摄像机
  • 源码地址:src/camera.html
  • 预览效果

纹理贴图

• 2D 贴图
  • 源码地址:src/texture.html
  • 预览效果
• 2D 贴图颜色
  • 源码地址:src/texture1.html
  • 预览效果
• 给立方体加贴图
  • 源码地址:src/textureCube.html
  • 预览效果
• 给立方体加动态 Canvas 贴图
  • 源码地址:src/textureCubeCanvas.html
  • 预览效果
• 给立方体加视频贴图
  • 源码地址:src/textureCubeVideo.html
  • 预览效果
• 帧缓冲贴图
  • 源码地址:src/cubeFrameBuffer.html
  • 预览效果

光照

• 平行漫反射光
  • 源码地址:src/diffuseLight.html
  • 预览效果
• 环境光+平行漫反射光
  • 源码地址:src/ambientDiffuseLight.html
  • 预览效果
• 环境光+点光源漫反射光
  • 源码地址:src/pointAmbientLight.html
  • 预览效果
• 点光源不跟着物体动
  • 源码地址:src/pointLight1.html
  • 预览效果

全景图与反射

• 全景图
  • 源码地址:src/panorama.html
  • 预览效果
• 反射立方体
  • 源码地址:src/reflectionCube.html
  • 预览效果
• 反射立方体+全景图
  • 源码地址:src/reflectionCube1.html
  • 预览效果
• 透明立方体+全景图
  • 源码地址:src/reflectionCube2.html
  • 预览效果

交互

• 旋转物体
  • 源码地址:src/actionRotate.html
  • 预览效果
• 选中物体
  • 源码地址:src/actionPick.html
  • 预览效果

其他

• 雾
  • 源码地址:src/fog.html
  • 预览效果
• 阴影
  • 源码地址:src/shadow.html
  • 预览效果

webgl高级图片滤镜

• 美白效果滤镜
  • 源码地址:src/filters/light.html
  • 预览效果
• 对比度效果滤镜
  • 源码地址:src/filters/contract.html
  • 预览效果
• 模糊效果滤镜
  • 源码地址:src/filters/blur.html
  • 预览效果
• 美白磨皮效果滤镜
  • 源码地址:src/filters/soft.html
  • 预览效果
• 柔光磨皮效果滤镜
  • 源码地址:src/filters/soft1.html
  • 预览效果
• lomo风格滤镜
  • 源码地址:src/filters/lomo.html
  • 预览效果
• 素描风格滤镜
  • 源码地址:src/filters/line.html
  • 预览效果
• 油画风格滤镜
  • 源码地址:src/filters/paint.html
  • 预览效果