小白学-WEBGL

第一天：

1.canvas和webgl的区别

  Canvas 和 WebGL 都是用于在网页上绘制图形的技术，它们通过浏览器提供的 API 使开发者能够创建丰富的视觉内容，但它们的工作原理和用途有所不同。

Canvas

  Canvas API 提供了一个通过 JavaScript 和 HTML <canvas> 元素绘制 2D 图形的方法。它是一个由网页浏览器渲染的矩形区域，你可以通过 JavaScript 动态地绘制其中的图像（如线条、形状、图像等）。Canvas 适用于较简单的图形和动画，以及图像处理和游戏的 2D 渲染。

• 2D 绘图：Canvas API 主要关注于 2D 图形的绘制。
• 即时渲染：绘制操作立即执行，不涉及场景或对象的概念。
• 简单易用：API 相对简单，容易上手，适合快速开发简单的图形应用。

WebGL

  WebGL（Web Graphics Library）是一个 JavaScript API，允许在不需要任何插件的情况下，在 Web 浏览器中使用 GPU 加速的方式进行 3D 绘图。WebGL 是 OpenGL ES 的一个绑定（即一个低级图形 API 的 Web 版本），它允许开发者创建复杂的 3D 图形和效果。

• 3D 绘图：WebGL 提供了创建和操纵在浏览器中渲染的复杂 3D 图形的能力。
• GPU 加速：利用用户的图形处理器（GPU），可以实现高性能的图形渲染。
• 复杂度高：由于提供了对底层图形硬件的直接访问，因此比 Canvas API 更复杂，学习曲线更陡峭。

关键区别

• 维度和性能：Canvas 更适合 2D 图形和简单动画，而 WebGL 专注于更复杂的 3D 渲染和高性能图形。
• API 复杂性：Canvas 的 API 相对简单易学，而 WebGL 提供了更接近硬件的控制，因此更为复杂。
• 使用场景：对于需要绘制简单图形或处理图像的应用，Canvas 可能是更好的选择。对于需要复杂三维效果、高性能渲染的应用，WebGL 将是更合适的技术。

2.什么是着色器？

着色器（Shader）是一种用于在图形处理器（GPU）上执行的小程序，专门用于图形渲染的计算。它们是现代图形API（如OpenGL、DirectX）和图形渲染管线的核心组件。着色器使得开发者能够对渲染过程中的顶点、像素（片段）、纹理等进行高度控制和自定义，从而产生各种视觉效果。主要有以下几种类型：

1. 顶点着色器（Vertex Shaders）：处理顶点数据，如位置、颜色、纹理坐标等。它运行在渲染流程的早期，负责将3D坐标转换为另一种3D坐标，同时进行一些顶点级别的处理。

2. 片段着色器（Fragment Shaders）/像素着色器（Pixel Shaders）：处理渲染到屏幕上每个像素的颜色和其他属性。它决定了最终像素的颜色值，包括贴图、阴影、光照效果等。

3. 几何着色器（Geometry Shaders）：介于顶点着色器和片段着色器之间，可以生成从一个顶点到另一个顶点的新图形。

4. 曲面细分着色器（Tessellation Shaders）：可以根据某些规则增加几何体的细节或顶点数量，通常用于实现物体表面的平滑渲染。

5. 计算着色器（Compute Shaders）：并不直接参与图形渲染，而是用于处理非图形的通用计算任务，如物理模拟、图像处理等。

3.绘制一个点的流程

一个个像素

第二天

1.canvas坐标系

canvas坐标系	webgl三维坐标系

2.绘制一个水平移动的点

3.声明attribute 变量:只能在顶点着色器使用

3.1.声明变量attribute

3.2attribute获取变量

3.3通过鼠标控制绘制

第三天

1.改变点的颜色

1.1使用uniform 变量

通过添加uniform设置变量

给uniform变量赋值

gl.uniform4f(uColor，1.0，0.0，0.0，1.0)

使用uniform的需要设置精度

precision mediump float;

既可以在顶点着色器使用也可以在片源着色器使用，但是顶点着色器不能使用顶点坐标

uniform 变量的使用流程

2使用缓冲区对象-绘制多个点

2.1什么是缓存区对象？

缓冲区对象是WebGL系统中的一块内存区域，可以一次性地向缓冲区对象中填充大量的顶点数据，然后将这些数据保存在其中，供顶点着色器使用

2.2Float32Array是类型化数组

在 webgl 中，需要处理大量的相同类型数据，所以引入类型化数组，这样程序就可以预知到数组中的数据类型，提高性能。

2.3绘制流程

 

2.4多缓存区和数据偏移

 流程和aPosition一样

3. 多种图形绘制

4.图形缩放-着色器