【WebGL】一边转载一边自学ing（0）

weiter

声明：本人极度业余，本系列无法实现有条理的编排，文中会出现很多问题，望周知。

                               
登录/注册后可看大图

什么是WebGL？


WebGL 使得网页在支持 HTML<canvas> 标签的浏览器中，不需要使用任何插件，便可以使用基于OpenGL ES 2.0 的 API 在 canvas 中进行 3D 渲染。
WebGL 程序由 javascript 的控制代码，和在计算机的图形处理单元（GPU, Graphics Processing Unit）中执行的特效代码 (shader code，渲染代码) 组成。
WebGL 元素可以和其他 HTML 元素混合，并且会和页面的其他部分或页面背景相合成。

WebGL经常被当成3D API，人们总想“我可以使用WebGL和一些神奇的东西做出炫酷的3D作品”。 事实上WebGL仅仅是一个光栅化引擎，它可以根据你的代码绘制出点，线和三角形。 想要利用WebGL完成更复杂任务，取决于你能否提供合适的代码，组合使用点，线和三角形代替实现。

WebGL在电脑的GPU中运行。因此你需要使用能够在GPU上运行的代码。 这样的代码需要提供成对的方法。每对方法中一个叫顶点着色器， 另一个叫片段着色器，并且使用一种和C或C++类似的强类型的语言 GLSL。 (GL着色语言)。 每一对组合起来称作一个 program（着色程序）。

顶点着色器的作用是计算顶点的位置。根据计算出的一系列顶点位置，WebGL可以对点， 线和三角形在内的一些图元进行光栅化处理。当对这些图元进行光栅化处理时需要使用片段着色器方法。 片段着色器的作用是计算出当前绘制图元中每个像素的颜色值。

几乎整个WebGL API都是关于如何设置这些成对方法的状态值以及运行它们。 对于想要绘制的每一个对象，都需要先设置一系列状态值，然后通过调用 gl.drawArrays 或 gl.drawElements 运行一个着色方法对，使得你的着色器对能够在GPU上运行。

——WebGL 基础概念 (webglfundamentals.org)

上文中提到的着色器可以通过四种方法获取数据：

• 属性（Attributes）和缓冲
  缓冲是发送到GPU的一些二进制数据序列，通常情况下缓冲数据包括位置，法向量，纹理坐标，顶点颜色值等。 你可以存储任何数据。
  属性用来指明怎么从缓冲中获取所需数据并将它提供给顶点着色器。 例如你可能在缓冲中用三个32位的浮点型数据存储一个位置值。 对于一个确切的属性你需要告诉它从哪个缓冲中获取数据，获取什么类型的数据（三个32位的浮点数据）， 起始偏移值是多少，到下一个位置的字节数是多少。
  缓冲不是随意读取的。事实上顶点着色器运行的次数是一个指定的确切数字， 每一次运行属性会从指定的缓冲中按照指定规则依次获取下一个值。
  
  
• 全局变量（Uniforms）
  全局变量在着色程序运行前赋值，在运行过程中全局有效。
  
  
• 纹理（Textures）
  纹理是一个数据序列，可以在着色程序运行中随意读取其中的数据。 大多数情况存放的是图像数据，但是纹理仅仅是数据序列， 你也可以随意存放除了颜色数据以外的其它数据。
  各位最熟悉的应该就是——
  

  
                                 
  登录/注册后可看大图

  ——来源：百度图片

  
  
  
• 可变量（Varyings）
  可变量是一种顶点着色器给片段着色器传值的方式，依照渲染的图元是点， 线还是三角形，顶点着色器中设置的可变量会在片段着色器运行中获取不同的插值。
  
  
  

                               
登录/注册后可看大图

WebGL发展


相比Unity，Cocos， 虚幻5等桌面3D引擎，WebGL服务于网页且起步较晚，所以WebGL的表现会比常见的桌面端3D引擎差上一亿点。但是在网页端中WebGL却是目前最稳定可靠的。（应该是这么说没错吧）
——来源：bilibili-冰哥图形学工作站

                               
登录/注册后可看大图

WebGL在浏览器上的兼容怎么样？


表格实在是太长了我选择直接丢一个链接：WebGL：web 中的 2D 的 3D 图形 - Web API | MDN (mozilla.org)


虽然但是WebGL毕竟比较原生始，更高效的开发中会使用Three.js等集成后的产物。比如下图中的——

——来源：CSDN-Web前端开发V
——来源：百度开发者中心-蛮不讲李



很多专有名词和概念啥的我其实没太搞明白所以如果哪里说错了请一定帮我指出啊啊谢谢了。
为了防止出一些未知的错误，多数内容会选择直接copy，所以可能翻译腔会比较重请多包涵。


暑假快结束了终于打算干点正事，有可能会因为大学开学打乱进度。
毕竟本人咸鱼一条烂泥扶不上墙嘛，随时可能断更，如果喜欢请收藏哦。

                               
登录/注册后可看大图

WebGL 教程文档有官中放心食用（啊准确讲其实是网页）

下篇=>

weiter

WebGL学习材料导览：
冰哥图形工作站【2022年WebGL入门教程（完结）】
WebGL电子书（郭隆邦）
WebGL入门教程（郭隆邦）
Mdn Web docs（有中文）
WebGLFundamentals（有中文）
【进华】WebGL教程-从入门到入门

FishC

哈哈，看来咸鱼是要翻身了嘛！想学WebGL又怕自己半途而废？别担心，我们慢慢来，先从最基础的开始，对了，你最喜欢的零食准备好了吗？

### 1. 什么是WebGL？

WebGL（Web Graphics Library）是一个让你在网页上实现3D图形渲染的技术，而且最棒的是——不需要安装任何插件！这意味着，可以直接在支持HTML的浏览器里愉快地玩耍，看起来就像魔法一样，对吧？借助WebGL，你可以写一些炫酷的3D效果，只需要利用JavaScript和一种叫“shader code”（渲染代码）的神秘力量。

### 2. WebGL的构成

WebGL程序分为两部分：
- **控制代码**：用JavaScript写的，用来告诉网页该做什么。
- **渲染代码**：在计算机的图形处理单元（GPU）执行，用于生成3D图形。听起来很高大上，其实它就是一些小代码片段，在你的显卡上忙忙碌碌。

### 3. 融入网页的能力

WebGL的另一个厉害之处是，它的生成的3D内容可以和其他HTML元素“打成一片”。想象一下，你能在一个网页上，不仅有文字和图片，还能有一个旋转的3D模型，又酷又实用。

### 4. Three.js：WebGL的好帮手

虽然WebGL很强大，但使用原生WebGL就像直接操控一辆赛车，需要极高的技术和耐心。为了解决这个问题，聪明的前端大神们开发了Three.js，一个基于WebGL的库，可以帮你更轻松地实现3D效果。就像是插上了翅膀的小鸟，再也不怕飞不高啦~

想象一下，就像用了Three.js之后，你不仅能煮方便面，还可以做龙虾大餐，下图就是这种感觉呢！（不过图在哪儿嘞？）

### 5. 学习资料

好消息来了！WebGL有官方中文文档，你可以安心食用~没错，不用担心看不懂外语，直接啃着汉字学习WebGL，滋味还是很不错的哦！

总结一下，如果你真的对3D渲染感兴趣，WebGL和Three.js绝对是值得投入时间来学习的宝藏。而且三人行必有我师，有问题随时上FishC提问哦，加油！期待你的3D网页作品，让我们一起来见证你的翻身奇迹！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

weiter

啊咧咧，什么时候实装的AI啊

FishC

weiter 发表于 2024-07-09 18:58
啊咧咧，什么时候实装的AI啊

哈哈，看起来你对AI的出现有点惊讶呢！其实鱼油们一直在进步，连AI助教都加入了我们的小团队！是不是有种突然感觉未来科技触手可及的感觉？别紧张，你的学习之旅会因为有AI的陪伴变得更有趣、更高效！

需要学习WebGL还是其他技术，不用怕，我们一起慢慢来，随时欢迎提问~就像有个永远不会疲劳的学霸室友，随叫随到，还不会嫌你烦，简直完美啦~ 加油哦！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

weiter

FishC 发表于 2024-7-9 18:58
哈哈，看起来你对AI的出现有点惊讶呢！其实鱼油们一直在进步，连AI助教都加入了我们的小团队！是不是有 ...

坏了，WebGL的水好像有点深。
原来想着日更，现在发现真得慢慢来了。

FishC

weiter 发表于 2024-07-09 19:33
坏了，WebGL的水好像有点深。
原来想着日 ...

哈哈，别慌别慌！WebGL确实是一片“大海”，但是我们可以从浅水区开始慢慢游到深水区嘛~一口吃不成胖子，我们走一步算一步，不着急！关键是要有耐心和毅力。

### 如何慢慢来学WebGL

1. **基础知识打牢：**
    - 先了解HTML、CSS和JavaScript的基本知识，这就是WebGL的“地基”。
    - 浏览一些WebGL的入门教程或视频，比如MDN上的教程就很不错。

2. **小目标定起来：**
    - 不要一上来就想做个3D游戏，可以从简单的小项目开始，比如画一个3D立方体，或者实现一个简单的动画效果。

3. **善用工具：**
    - 别忘了我们的朋友Three.js！它会帮你简化很多操作，让你能更快看到成果。相信我，当你看到第一个三维模型在屏幕上旋转时，那种成就感无与伦比！

4. **多看多练：**
    - 看别人的代码，尝试理解并修改，看看结果如何。GitHub和一些开源项目是很好的资源。
    - 每天进步一点点，不一定非要日更，但要保持学习的热情和节奏。

5. **参与社区：**
    - 加入一些WebGL或Three.js的论坛、QQ群、微信群，有问题随时问，有大神指点会轻松很多。
    - 或者就来咱们FishC的社区，大家互相帮助，共同进步~

### 心态调整

学习新技术总会遇到瓶颈和挫折，别给自己太大压力，也别把自己逼得太紧。可以用以下心态来调整：

- **享受过程**：学习本来就是一个逐步积累的过程，享受每一次小突破带来的喜悦。
- **适当休息**：当感觉自己脑子转不过来时，休息一下，去做点其他事情。灵光往往是在放松时突然到来的！
- **找乐趣**：试着把学习变得有趣，比如编写代码时想象自己是在创建一个小世界，这样即使是调试错误也变成了一种探索的乐趣。

最后别忘了，有任何问题随时向FishC社区求助，咱们鱼油们都是抱团取暖，共同进步的！加油啦！
以上回复来自 FishC AI 小助理，如未能正确解答您的问题，请继续追问。

小甲鱼的二师兄

哈哈，跟着楼主一起学习 WebGL~

weiter

小甲鱼的二师兄 发表于 2024-7-10 01:20
哈哈，跟着楼主一起学习 WebGL~

为什么论坛搜索WebGL只有不二大大的一个作品分享啊（除了这篇外）
本来是想着用论坛里的资源来自学的现在得到处找视频和文档，真的抓瞎

小甲鱼的二师兄

weiter 发表于 2024-7-10 11:06
为什么论坛搜索WebGL只有不二大大的一个作品分享啊（除了这篇外）
本来是想着用论坛里的资源 ...

所以这就要靠你了~

weiter

小甲鱼的二师兄 发表于 2024-7-10 15:18
所以这就要靠你了~

我……