学习笔记——WebGL

书目

大纲

  • 概述
    • 发展历史
  • 基础概念
    • 一个光栅化引擎,它可以根据你的代码绘制出点,线和三角形。
    • 需要提供成对的方法,每对方法中一个叫顶点着色器, 另一个叫片断着色器。
    • 着色器获取数据的4种方法
    • 图元(primitives)
    • 深度缓冲(Depth buffer 或者 Z-Buffer)
    • 模板(stencil)
    • 片段着色器精度
  • 渲染管道(PipeLine)
    • 顶点着色器(vertex shader)
    • 图元组装(Primitives generation)
    • 光栅化(rasterization)
    • 片段着色器(fragment shader)
    • 逐像素处理(per-fragment operations)
    • 帧缓存(framebuffer)
  • 二维运算
    • 二维平移
    • 二维旋转
    • 二维缩放
    • 二维投影
    • 二维矩阵
  • 三维投影
    • 三维正射投影(orthographic)
    • 三维透视投影(perspective)
    • 三维相机
  • 模型、视图、投影矩阵(MVP)
    • 坐标系
    • 本地坐标系(local coordinate system)
    • 世界坐标系(world coordinate system)
    • 观察坐标系(view coordinate system)
    • 剪裁坐标系(clipping coordinate system)
  • 光照
    • 三维方向光源
    • 三维点光源
    • 三维聚光灯
    • 阴影
  • 几何
    • 三维几何加工
    • obj 文件加载
    • 加载带 Mtl 的 Obj
  • 图像处理
    • 绘制图片需要使用纹理,渲染纹理时需要纹理坐标,而不是像素坐标。纹理坐标范围始终是 0.0 到 1.0 。
    • 将图像上传到 gl 的纹理
    • 在纹理上寻找对应颜色值
    • 图像颜色通道修改
    • 每个像素的值设置为与左右像素的均值
    • 施加多种效果
  • 纹理
    • 三维纹理
    • 数据纹理
    • 渲染到纹理
    • 跨域图像
    • 纹理映射的透视纠正
    • 平面的和透视的投影映射
  • 文字
    • HTML
    • 二维Canvas
    • 使用纹理
    • 字形纹理
  • 三维环境
    • 立方体贴图
    • 环境贴图
    • 天空盒
    • 蒙皮
    • 场景图
    • 鼠标拾取
  • Canvas
    • clientWidth 和 clientHeight,返回的是画布在浏览器中实际显示的大小。
    • 尺寸
    • Retina 或 HD-DPI
  • 动画
    • requestAnimationFrame
  • 其他
    • 实例化绘制
    • 多视角渲染
    • 多画布渲染
    • 透明渲染
  • 代码规范
    • 应用基本结构
    • 命名约定
    • GLSL 中的 undefined
  • 实用工具
    • 开发调试
    • 状态调试工具(WebGL State Diagram)
    • WebGL 引用表
  • 测试
    • 功能测试
    • 性能测试
  • 相关框架
    • WebGL封装
    • 渲染引擎
    • 游戏引擎
  • WebGL2
    • 顶点数组对象始终可用
    • 着色器中可以获取纹理大小
    • 直接选取纹素
    • 更多纹理格式
    • 3D 纹理
    • 纹理数组
    • 非2的幂纹理支持
    • 移除着色器循环限制
    • GLSL中的矩阵函数
    • 常见的压缩纹理
    • Uniform 缓冲对象
    • 深度纹理

下方为 xmind 脑图的线上分享,如果没加载出来需要等一会会。

发布者

Zhang

hope you enjoy my articles.

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注