不幸的是，这节课并不是真正的课。我们不会立即编码
我们将讨论网络凝胶以及为什么我们应该使用 3GIS。不用担心
时间并不长，我认为这会很有趣。你需要知道这些事情
嗯，您可能已经知道什么是 3GIS。好吧，但我们来谈谈它以及为什么我们需要它
3GIS 是一个 3D JavaScript 库，使开发人员能够为 Web 创建 3D 体验
好吧，这是为了网络。好处是您几乎可以使用网络做任何事情。所以这很棒
它与网络凝胶一起使用。因此，我们将讨论 Web gel，但您可以使 3GIS 与 SVG 一起使用
CSS 之类的东西。是的，你可以这么做
大多数使用 3GIS 的人并不知道它，因为他们并不真正需要它
但相信我，您可以让 3GIS 与 SVG 和 CSS 一起使用
你不会得到相同的结果。看起来不会那么好
您会遇到性能问题，但仍然知道您可以做到这一点。我们不会那样做
我们将专注于 web gel 3GIS 来创建 web gel 体验
好吧，让我们做一些展示。这只是一个网站。我真的很想给你看一些我做了一些
我没有做一些很久以前做的，有些是几天前做的，我认为很棒
我想向您展示 3GIS 可以做什么
所以第一个显然是我的投资组合。我不会在这个问题上花太多时间，因为你已经知道了
我只会稍微增加尺寸
类似的事情。够了。所以这只是我的投资组合。您可以在 web gel 中创建您的作品集
这是一个很好的练习方法
这是展示您的能力并让人们享受乐趣的好方法
好吧，我们不要在这个问题上花太多时间。你可能已经知道了
下一张我觉得还是很漂亮的。这就像最好的体验之一
我见过它看起来很棒。这是玉米的革命。它是
先锋真是太美了看那个
看起来不错。表演都不错
在糟糕的计算机上可能会有点慢，但对于这种渲染，他们做得非常出色
所以这真的令人难以置信，在这里查看这些文本，这些文本是在 web gel 2 中制作的
有了这些动画，看起来真的很酷。看看这个字段
真是太棒了
哦，顺便说一下，所有这些链接您只需单击此页面右上角的链接面板即可
您正在查看打开链接面板，单击链接，您将能够享受它
当你看到这些网站时要小心，也许其中一些
当你看到这个视频时，其中一些已经不存在了
如果是这样，请看看我的屏幕，我会更新此链接
所以检查链接。也许几个月后我会添加更多内容或类似的内容
好的。下一个是让我检查一下。是的，又是这个
这是理查德·马特马特卡的作品集。抱歉，如果我说错了，但我认为这很酷。我他做了一个
网络凝胶背景
保持页面打开，继续查看形状，您会发现它会发生变化，而且看起来很棒。太棒了
错觉
显然，伊丹
该作品集就像一个巨大的展示
将 3gs 和网络凝胶的可能性发挥到最大
看看其他页面。好吧，看看不同的页面。你会发现其中有很多好东西
下一张是最近的一张。这是为了一场比赛。这是一个vr游戏
这是荣誉勋章。我想名字就在上面。是的，超越了，还有什么比
为 3d 游戏制作一个 web gel 网站
这样您就可以享受同样的体验。可能没那么好，因为这不是 VR
就像在网页中一样，但您仍然会看到它有多棒
所以这是一个视频。我会跳过视频直接进入体验
我只是想展示一些你会明白原因的东西，这样你现在就可以看到。这只是一个图像背景中的图像
它不是图像。看那个
当你看到那个图像时你的感觉就像哦，是的
这是一张很好的图片，然后你滚动一下，你就会觉得，哇
它只是在你面前爆炸，这不是一个图像。这是 3d
3D模型上有很多绘画。所以他们在这方面做得很好
但他们仍然以 3D 方式做到了，你可以穿过这个村庄并再次发现一个故事
我不会向你展示这次经历的一切。我让你发现这些，这很棒，声音设计也很棒
我没有把声音放在视频上，而是用声音来测试。这个真的很酷
下一个是
让我们玩。哦，是的，我最喜欢的之一
经验
他们为 wego 做到了。 Wego 就像法国的一家火车公司。不知道其他国家是不是这样
无论如何，他们做了一个皮博酒。我是一名游戏玩家。我喜欢打开网页就可以玩
他们做了一些事情。我真的很喜欢他们
综合我必须集中精力
他们的游戏有物理，我喜欢当我们有物理时你可以玩物理我在这个游戏上很糟糕
所以我们只是
输给
故意的，这真的很酷。我们将再次讨论这个问题
当我们要一起做一些物理时
我还有更多内容要展示，我想在此页面上放置数百个网站
但我只得选择。我不知道大概有十几个网站
是的，我放这个是因为首先它看起来很棒很棒的设计很棒很棒的网络凝胶东西
但这是因为当你有一个产品时，你想展示你的产品，以便用户可以看到它
有什么比拥有这样的真实渲染更好呢？
人们将不仅仅是图像，人们将能够在模型上旋转模型缩放
也许看到非常具体的部分。我可以检查什么？也许是这个？
放大它，我就可以回去改变它之类的东西。这就是它的完美
如果您想展示您的产品
我在 webjl 中创建它，但你必须得到一个非常现实的
渲染和性能，我将向您展示如何做到这一点
明显地
呃，泽尼。是的，我真的很喜欢这个。呃，也是因为呃，好吧，看起来很棒，表演很棒
该网站甚至没有那么重，但它也是为了集中使用一个名为 zenni 的应用程序
呃，你有一个不同的世界，你可以环游世界，看看相似的城市
我们就这样改变世界
你有很多动画，这一个做得很好
看看型号。他们看起来很棒。看看香肠。还隐藏着一些小事
我们将测试该网站，结果下一个将是呃之前
之前是呃，我不知道这个英文单词。我们说叛徒。这是一个日本汉奸。所以这是为了你知道的，呃处理
活动，呃，为婚礼的大型活动准备食物，呃，活动，呃，你真的有类似的东西
诗意的就像它真的一样
身临其境，呃，有点神秘，我不知道你是否
如果我们可以使用这个词，但它是oniric，呃，看看这个丝带
查看丝带的物理原理 查看丝带的纹理 查看在该丝带上运行的绘图
再一次，我让你发现像菜单这样的东西。还有一些隐藏的，呃，
特征
下一张中间一张。我真的很喜欢这个
是颜色。我喜欢它的风格。我喜欢这种 tron tron 风格
巨大的城市，你从小规模开始，它变得巨大，你现在就会看到
我们所拥有的只是一个经典的 webjet 背景。这只是一个渐变而已
不，这不对
这是这个呃，这个小家伙的头
看看颜色。我真的很喜欢这些颜色
他们做得非常出色。就在沉浸式花园旁边，呃，太酷了
有很多隐藏的功能，隐藏的导航功能。所以我让你像其他人一样发现
看看这个城市。看看地面上的倒影。这很疯狂。我真的很喜欢这个。可能是我今年最喜欢的
呃下一个
是的，下一个是游戏，因为你可以创建游戏，我们说小妖精，这是一所法国学校
所以我们可以说妖精们
所以只是学生们我做得很好，所以我们做了新游戏
即使简介很棒，我也会跳过简介。我让你发现这个故事
我会直接进入游戏看看
看起来很棒，你可以跳，你必须向前走
经历不同的障碍
你将获得力量，这些力量会让你做更多的事情，你会发现你必须自己测试
是的，最后一件事。这是呃图表。是为了一杯酒。你怎么说酿酒师酿的酒？
我不知道具体的名字
看看这就是他们酿造这种酒的真正村庄
你又喜欢这个包裹了
我不知道这个词是否正确，这就是真正的村庄，就像你真的有那些街道一样
森林里的那些房子就在这里。呃，这是街道的真实名称，看看详情
村庄里有成千上万的元素，看起来很棒，如果你走进田野看看
然后你放大视野并观察
这太疯狂了。看看这个，你可以滚动到下面，我们称之为流场效应
呃，无论如何，创造出那些让游客惊喜的体验真是太酷了
好了，这就是展示的全部内容。我还有更多网站。我想给你看，但还是
让我们试着回到教训
那么webjl是什么？我会把它放在这里
那么 webjl webjl 就是我们所说的 javascript api
您可以访问属性，也可以访问方法
你可以接触到很多东西，然后用这些东西来创造东西
好的
这个想法是，您将以惊人的速度渲染三角形，就像绘制三角形一样
webjl 会在这里画一个三角形 这里一个三角形
这些三角形可以有非常不同的形状，这里一个，这里一个大的，就像这样
它只会绘制三角形
但真的真的真的很快
结果可以在画布上绘制
但不一定你可以将结果放入其他东西中，我们会在某个时候这样做
你会明白为什么，但我们一开始不会在画布上绘制结果
这样我们就可以做一些事情，然后最后将其放入画布中
但通常最后你会在画布上得到一些东西，因为我们想看到
体验 3D 体验。它与大多数现代浏览器兼容。你可以直接使用它
这里并不奇怪
它使用图形处理单元，这就是它如此之快的原因。我们称之为GPU
好吧，它是您计算机中的一个组件。有cpu，有gpu
当你用 javascript 进行计算时，我不知道
当你绘制这些三角形时，二加二就是CPU的工作情况。这是GPU在工作
呃 webjl 可以用于 2d
真的，使用 webjl 进行 2d 真的很酷，因为你能做的可能是我不知道像这样画三角形
像这样画三角形
在那个三角形上你会画一个类似的小家伙，这个小家伙将是你的角色
然后当你移动你的键盘时，你就会做出这个
这两个三角形移动
所以，是的，您可以使用 webjl 来创建 2D 体验，我们不会这样做，但您可以这样做，并且有库
像 pixie.js 一样致力于此
无论如何，让我们继续前进吧。那么我们来谈谈cpu引擎gpu
cpu 可以非常非常快地进行计算，就像你的 cpu 现在一样
你的CPU正在做很多计算。这很疯狂
但它是一个接一个的，必须完成第一个计算才能进行下一个计算
这并不完全正确，因为大多数 cpu 现在都有多个核心
这意味着它可以在多个线程上工作，就像我不知道的那样
有八个核心，我们用一个核心来照顾您的镀铬
JavaScript 应用程序和一个核心将负责您在背面运行的视频游戏，而一个核心将负责
我不知道你有一个开放的申请
这就是为什么我们的cpu可以做多次计算，但是对于你的javascript
就像您只是进行计算一样的应用程序。它将只有一个CPU。好的
GPU的速度不如CPU
但它将能够连续进行成千上万的计算
这正是我们绘制三角形所需要的
这个想法是绘制一个 3D 模型，因为最后我们想要一个 3D 模型，我们将绘制许多三角形
但我们要把它们画在正确的位置，然后给它们上色，这样它们看起来就是我们想要的样子
GPU 会根据多种因素将所有这些点定位在一个位置，比如让我删除这个
我们的想法是，呃，画画。我不知道这里也许有一点
也许这里有一点。我们将讨论这些要点。有很多需要了解的也许有一点
我不知道这里。也许这里有一个也许这里有一个也许这里有一个
也许这里有一个，也许这里后面也有一个。所以这只是定位点
在渲染的屏幕上。我不确切知道渲染某种二维空间的屏幕，然后
它会画出来让我用。我不知道扳手和三角形
这里有一个三角形，这里有一个三角形，这里有一个三角形，这里有一个三角形。
这里还有另一张
另一个让我们在这里说另一个在这里看看
我们有一个立方体
看到我们定位事物，我们就得到了定位。呃，抱歉。不，这个是错误的
所以大部分都是去那里，这样我们就可以定位
几何图形的点 类似的点
根据很多因素你会发现有很多因素，比如立方体应该在哪里
如果我的相机因为我们有某种相机而处于这样的位置，那么这些点应该在哪里
它们应该在其他地方，所以我们提供这些顶点获得的一堆信息
抱歉，我正在谈论技术术语，但这些点将根据某些内容定位在正确的位置
就像节目我们说什么然后
他们将被吸引。所以一旦像这样放置点
GPU 因此 GPU 会将所有这些点定位为 1。这就是我一开始想说的
所以也许我们有一些喜欢的东西也许我们这里有八分
实际上，我们有更多，但也许我们有八个点，我们可以使用更复杂的几何形状
成千上万甚至更多
点
所以我们可以有很多细节，这就是我们绘制的方式。我不知道也许有人在 3D 中的脸
我不知道也许是一个球体、一座房子或类似的东西。我们有比这八点更多的点
一旦这些点位于它们应该在的位置
目前我们实际上看不到任何东西。我知道我画了一些三角形
但是当这些点被放置时我们看不到任何东西
但现在这些点已经放置好，GPU 将绘制每个可见的点
这些点的像素意味着如果这应该是在屏幕上
嗯，你的屏幕是由类似这样的像素组成的
所以它显然是巨大的像素，这样我们就可以理解，但我们得到的像素是这样的
然后GPU知道这里有一个点这里有一个点
然后GPU会绘制这个像素这个像素这个像素这个像素这个一个这个一个这个一个
而这一次，还会这样继续下去
再说一遍，因为它是 GPU，所以速度非常快
就像它会一次处理所有像素，如果不是的话，可能会分两次处理，以便它处理所有像素
但仅仅在两两两迭代中我们就会说
好吧，这就是想法，这就是为什么你的 GPU 如此快
这些指令比如定位顶点、这里的点、颜色、这个
这个像素就是这样
或者
或者在着色器内部，那些对点进行着色和定位的指令位于我们所谓的着色器内部，而着色器确实很难
我们将一起学习着色器，但是你会发现着色器真的很难，正如你所看到的
这有点复杂。我们必须定位点
我们必须对它们进行着色，我们必须绘制它们，以便在我们称为着色器的程序中编写指令
越来越难了。你现在要做什么？不用担心
我们向这些着色器提供大量信息，例如点位置、模型变换、相机坐标等
按照我们想要的方式定位和着色，这正是我在这一切变得如此困难之前所做的
在画布上绘制一个三角形至少需要 100 行代码，而我做到了
当我尝试学习webjl时
我尝试学习webjl原生webjl，花了我100多行代码才画了一张
屏幕上我的画布上的单个三角形
太难了。我当时想，不，我可以，我永远不能做那种 webjl 体验。不可能
但
做原生 webjl 受益于低水平的存在
所以你就像与你的 GPU 交谈来定位事物并为像素着色，这很棒，因为你可以优化一切
并且有更多的控制权，但这太难了，这就是 3gs 可以拯救的地方
3gs 是 JavaScript 库。它已获得麻省理工学院许可。耶
它就在 webjl 的上方。所以你有这个 webjl 太难了并且就在 webjl 之上
你有 3gs 而不是 4，这很好，因为我们也可以做一些 webjl
创作者是里卡多·卡贝洛（ricardo cabello），又名先生。杜布（Doob），我们最熟悉他的名字是“先生”
Doob，我把链接放到了它的网站和推特上。你应该跟随先生
Doob 和 3gs 将大大简化流程。对这一切感到抱歉
您不必处理这些着色器
您无需绘制即可编写这些着色器
您不必提供每个点，您只需告诉我想要一个立方体，立方体就会出现。所以就是
非常好
但我们仍然可以与 webjl 交互，因为它就在 webjl 之上
到了某个时候，我们将能够创建自己的着色器并发送我们自己的信息
这是为了当我们想走得更远的时候。我们想要创造我们自己的东西
我们想要优化东西。我们想做 3gs 做不到的事情，我们可以做到，这很好，因为
3gs 就在 webjl 的上方
好的
我们再多谈谈3gs。所以先生。 Doob仍在努力
但现在在一个大社区的帮助下，我可以给你一个关于谁做了这个工作的小预览
所以它来自 github 上。你可以在 github 上找到 3gs。正如你所看到的
就像所有这些人都在研究 3g 一样。所以这太棒了
看看那个巨大的社区，很多人仍在研究 3gs
感谢所有帮助 3gs 项目的人们
图书馆获得更新
每个月，所以这很酷，每次更新你都会得到
更改变更日志，以便您知道更新了什么，这只是一个更新
这是另一次更新，正如您所看到的，有很多事情发生了变化，不用担心
对你来说应该是一样的
也许lulusen和你的版本会有一些差异
但我会尽力相应地更新内容
图书馆相当稳定。好吧，这主要是像这样的详细功能新方法之类的东西
没有太大的变化，因为现在库非​​常稳定
所以这是一些小错误费用和优化以及新功能
通常您可以在此处的主页上发现许多出色的项目
所以只需检查这些项目即可。呃，我们已经看过其中一些了，比如这个这个这个这个
但是，是的，检查一下这些项目。这个真的很酷，很明显
所以是的，看看那些
此页面会定期更新
有一个维护良好的文档，3gs 文档真的很酷
就像你真的可以使用它一样。我放置了创建场景的链接
我们将在下一课中一起这样做。但如果您想查看文档，请执行以下操作
我们有很多很多的例子，它们都很棒。这里仅举一个例子。看看我们是谁多么伟大
渲染可以是
非常现实，看看那些例子
有很多例子，如果您需要做某件事但不知道如何做，请检查示例并进行搜索
呃，我们这里有搜索栏，也许我们发现它正在发生。看那个
我尽可能快地向上滚动，它一直在继续。好了，例子就这么多了
所以请看一下示例。我们会学到很多东西
如果你想了解 3gs 更新新项目之类的东西。我建议好好跟随，先生
Doob，呃，所以你可以关注他的帐户，而且还有一个 3gs
帐户 Twitter 帐户关注此呃 3gs 帐户。你会得到很多更新很酷的东西
关注此账号
那么其他图书馆呢？确实 3gs 是最流行的 webjail 库
它非常稳定。它提供了许多功能。该文档非常出色。社区正在努力更新
而且它仍然足够接近网络监狱，所以我们可以做我们自己的着色器之类的事情
我们将了解什么是着色器以及如何将它们结合在一起
但是还有许多其他 webjail 库，这些 webjail 库可能会做不同的事情
更好的功能可能会更优化或更容易使用，就像它更像一个框架
框架而不是库。所以请好奇地看看其他图书馆
我不会放链接，因为链接太多了，但是呃，保持好奇心
我建议您使用 3gs，但这实际上取决于您的需要并看看其他库
我们下一课见