WebGL学习笔记（一）

学习来源笔记来源：

https://www.bilibili.com/video/BV1LB4y197Ew/?spm_id_from=333.337.search-card.all.click&vd_source=307bdfa71e5aa4288a506aee6147aec0

What

    WebGL

    》 openGl 与JS 的绑定

    》openGl ：用于渲染2D，3D矢量图形的跨语言，跨平台的应用程序编程接口

Why

    Canvas 2D : CPU 运算

    WebGLGl ： 调用GPU  --快

How WebGL

坐标系：

x轴y轴 固定，Z 朝向不一样

左手坐标系：  

  X ：大拇指  --朝右

  y:  十指 -- 朝上

  Z：  其余手指 -朝内

右手坐标系： （webGL，three.js ，3dMax）

  X ：大拇指  --朝右

  y:  十指 -- 朝上

  Z：  其余手指 -朝外

webgl  x,y,z  取值范围 -1 到1

线性代数

  》 Vector： 矢量

  》 Maxtrix 矩阵

矢量：

    点 poit

    线 line

    面 face

    体 geometry： 无数个三角形可以构成 体

矩阵：

why：

   如何移动，旋转，缩放3维物体

   矩阵的平移，旋转，缩放

   矩阵* 向量 --- 线性变换，仿射变换

   乘积  compose

   转置  

-**************硬件加速  **************

GPU 的渲染管线： Graphic pipeline

GPU 渲染管线的原理

 Vertices in 3d space （在3d空间中的无数个点）

 --1》 Vertex Processing： 点的处理，做 MVP Transformation 运算  ，返回Vertex Stream

        M --model 一个几何模型： 模型运算（矩阵运算）

        V --view ：摄像机视角（位置）

        p --projection --投影关系 eg：近大远小

 --2》Triangle proccessing ： 三角行处理，返回Triangle Stream

 

 --3》 Rasterization  (光栅化)

        将顶点数据转换为片元（Fragment）数据的过程

 --> Framgement Processing： 片元处理

     采样（Sample）

 --》 FrameBuffer

     ES6 新增类型：Arraybuffer

 --》Display

 ------------------------------着色器 -------------------------------

 着色器：Shader

  ---渲染管线过程中，允许对顶点和片元编程

  --在GPU上执行的代码

  》顶点着色器：

  》片元着色器：每个像素叫片元

 

> three.js

    Cammmer : 投影(透视)摄像机--近大远小

              正交摄像机；

    geometry： 体      

    Material:  体需要上身的颜色

 

    Mesh：

    mesh = new Mesh(geometry,material)

        geometry  --体

        material  --颜色

  资料：

   》图形学原理：《现代计算机图形学入门》 Overview of computer Graphics

      https://www.bilibili.com/video/BV1X7411F744/?p=1

   》线性代数

        官方双语/合集】线性代数的本质 - 系列合集: https://www.bilibili.com/video/BV1ys411472E?p=1

       作者； @3Blue1Brown

   》WebGL编程指南