Cesium WebGIS教程

好，我们今天给大家讲的呢，是关于三维格式化方面的一个比较窄的一个领域啊，是基于 thism 的 三 d 格式化开发， 因为大家其实前面有提到像 open layer 或者是 mapbox 呢，这一类，其实更多的还是在二 d 这个层面上面啊，其实它能够应用的一些场景不太多，所以呢，我们基于三维格式化，基于 thism 来给大家讲一个那个完整的例子啊，来带大家去，比如说没有学过三维格式化的同学呢，带你能够快速地入个门啊，我们的整个内容呢，是从建模开始 建模型，然后呢模型导出，还有模型导出的一些细节的格式啊，怎么去处理？最后呢我们模型加载到这个应用里面来，怎么去加载？加载之后后续的一些处理怎么去实现？这个我们会一步一步来给大家去介绍啊。好，那这个做完之后呢，其实对于你后续的呃方向上面呢，其实有一个补充，就是数字孪生， 因为三维格式化相关的开发呢，你除了后续可以去在这个基础上去做，比如像游戏啊，还有一些格式化的开发以外，还能够做数字孪生，包括呢还有那个 ar， 虚拟现实，还有原宇宙，这些其实都可以去做啊， 所以三维格式化开发的这个比较宏观大的这个概念呢，我们先要把它理解啊，就是什么是三维格式化开发，然后三维格式化开发有哪些技术点？常见的技术点啊，就是比较主流的技术点有哪些啊？以此呢，我们后续再可以分细划的方向和内容再去学习。好， 那么我们今天整个的内容呢，会从以下几个方面啊，第一个是三维格式化场景的一些介绍，然后呢还有三维格式化开发的一些方案剖析，再然后就是 season 的 基础跟使用进阶，还有就是 webgl 基础进阶， gl 的 语法以及语法相关的精细啊，会给大家详细介绍。最后呢还有 webgl 的 三维格式化开发实战。 最后一点就是关于 season 的 原码的剖析，简单给大家去把原码呢也给大家捋捋一遍啊。好，那我们同样呢会以三个问题来展开。第一个问题呢，相对初衷及一点啊，就比如说 同学去面试的话，被问到之前你有没有做过三维格式化开发，有做过的话，那三维格式化开发具体在什么方向，什么场景，用什么方案 啊，这是第一个问题。第二个就更精简一点，那么你能否基于 thism webgl 的 这套架构自己去实现？呃，整个三维体系包括呢？倾斜摄影的概念 啊，震慑影像的概念，白膜金膜的概念，以及模型的格式，如何去优化加载等等啊，这些细节内容比较多。然后呢接着另外一个问题就是着色器，我相信很多同学既然虽然说没有做过三维开发，但是肯定听说过着色器这个概念，对吧？ 那么 glsl 的 定制色彩渲染怎么去做？这是进一步的问题，咱们在专家级的问题，站在前端架构师的这个角度，简单说一说 season 的 原理原码， season 怎么样去会制这样一个三维的地球？然后呢？呃，地理数据影像，还有呢，地理数据的格式化是怎么来去做的？ 为什么说 system 是 在呃 webg 这个领域上面比较知名的这样一个库啊？它的优势在哪里？然后呢？怎么样去基于 system 跟 webg 以后来实现地图的扫描和地理飞线？还有其他等等啊？我们会带大家去来完成大概有三四个案例来带大家去快速入门这个三维格式化。

整个技术选型决策的时候呢，我们会给大家呃简单提一点啊，就是这个表格，一般如果简单的这种格式化呢？三维的话你可以自己尝试的用 webgl 来做， 相对复杂的，你可以基于 threejs 啊，然后如果是跟地理坐标系，跟那个数字地球或者用 webjs 相挂钩的话，就用 season 啊，就用 season 好， 这是技术决策矩阵这部分的。然后呢选型建议也给大家去列了个建议啊，大家可以根据我这个建议呢来后续自己来去看 重庆渲染效果如何啊？这个渲染的话是大概的啊，因为模型的话是相对比较老旧的，如果你想它渲染得特别好的话，得自己去做一些高层或者是做呃，可以去下载一些那种呃，精精细化的一些影像，这样才能够更清晰。 好好，这是第一个问题呢，我们就先给大家介绍这么多，对于这一部分，大家重点掌握的是三维函数，工业制造和 webjs 还有 bim 这四个方向啊。然后呢第 二个大的点就是技术选型 web 机油， three g s 跟 season。 那 么我们今天的重点是 season 加加 web 机油，我们后续的话可以给大家去来呃，在重点去讲一讲 three g s 啊，可能在后面安排一节公开课。

刚才的话我们做了课程介绍，那现在话我们直接动手，那么我们首先的话，我们使用 victor 来去创造我们的项目，然后呢接着我们引入我们的 c 的插件， 接着我们再进行我们的数字城市的一个代码的编写，那这一期的话我们就结合 xis 本身官方的案例，我们去打造一个纽约的数字城市。好，那我们现在的话就来开始， 首先的话我们在这里，我们啊，我在这里面我搞了一个空目录，对吧？那在这个空目录里面的话，我们现在 点开集成终端，然后呢我们去创建，通过我们的 victor 去创建我们项目。那好，那首先的话我们就是说对命令不是很熟的同学，大家可以进入到 b 特的官网，然后呢点击开始，在这里面的话，我们可以通过一样或者 npa 来进行项目的一个创建。好，那在我们这里的话，我们就直接通过我们的这个创建一下啊，我们复制一下， 然后呢在这边的话我们点击这个创建，对吧？那这个创建这个项目 app 的话，你可以比如说改成我们的这个新省 app， 对吧？ 好， ok， 我们回车啊就可以进行创建了。那在这个时候的话，我们稍微耐心等候一下， 整个因为需要安装我们的 nodomodos 的依赖，会稍微大概需要一分钟的时间，我们已经创建好。 好了，那我们现在进入到我们的这个吸粉 app， 然后呢我们用我们的这个样安装一下我们相对应的这个依赖，我们直接把这个样敲一下， ok， 好，那接着的话我们就呃这里面的话他有说要干嘛？都把我们直接点击，呃，允许程序运行就可以了。好，那接着的话我们在这里我们直接运行一下，一样 dv 就 ok 了。 好，然后呢我们不再提醒，然后允许程序运行。好，那现在话我们这个项目就运行出来了。好，没有任何问题。那这就是我们使用 victor 快速创建的第一个项目。那在这里面的话，我们现在需要什么？使用一下我们的这个 这个插件，那在这边的话我们可以找到我们的这个插件开发这里，对吧？点击一下，那在这边的话，我们可以找到我们的这个社区插件，那在这个社区插件里面呢，我们就可以进入到我们的这个一哈本啊，就这个。 ok， 因为一哈本打开相对来说比较慢，我把之前就已经打开来了。 那在这边的话，我们现在是找到我们的 cc， 对吧？ ok， 好，那这句话我们就是 cesiun。 好，那么这一块我们可以看到他是第四个，其实还是比较浅的，对吧？那在这里我们点击进来， 点进去之后呢，他有这个告诉你我们如何去使用我们的这个锡纸插件，进来之后我们发现呢，他这边的话就会告诉我们去安装 一个，对吧？就是那这里面的话我们就使用这个样来进行一个安装啊，当然换你刚才是 mpn 的话，你就用 mpn 安装好，那在这里的话我们就暂时中断一下，然后呢我把这个代码我们连贴进来， 年龄渐渐重呢，我们在这里的话，我们就可以导入了 我们的这个吸枕啊，非常的这个方便。那导入的。呃，当这里面的话，我们需要在 victor 这里面去进行一个配置啊，就 victor ctrlf 一点这样子配置，我们需要使用到我们的这个吸子插件。 ok， 那所以的话我们把这一块这个吸枕的这个导入，我们给它扶植进来。 好，那 ok， 那在这里的话，我们的 victorconfit 点就 s 就在这一个位置。那接着我们把我们刚刚所写的这个代码给大家连贴进来。 好，那在这边的话，我们可以看到他其实这里有个 vivo， 对吧？那我看我们在这里把这个 vivo 放到这里来，然后呢打个逗号啊。 ok， 把这一部分我们就可以删除掉了。 好，那接着的话我们就可以进行这个使用。我们的这个 西省，那我们的这个西省的话，那在这里的话，我们比如说你如果需要这个全局的啊，这个所有的都导入进来的话，那我们就可以通过这个以后的啊新，然后 sc 省来进行一个导入，方便我们去这个全局就是全局使用各种电量。好， ok， 那在这里的话，我们现在 就在我们的这个 srcapp 点六这里我们进行一下这个啊写入。好，那像这个，哈喽，我们现在没有必要写了，对吧？那我们给他干掉啊，不需要了。好，那在这边的话，我们也这个内容也不需要了，我们就可以给他删除掉 啊，然后我个人习惯啊，还是把这个模板放在上面，然后呢？这个啊 square 先放在下面一点点。 好，那这然后呢？接着的话我们就来这个啊把，因为他这边的话，我们是用这个。就是你看啊，他这边做了一件什么事情呢？就是 创建我们这个 season 的这个查看器，那这个查看器的话，他所这个 id 是什么？ id？ 是 season cten， 对吧？ cancan， ok， 那在这里面的话，我们就搞一个 seasoncompant 来进行这个 操作。 ok， 那就是这个。好，那也就说啊，到时候的话，他会把我们的这个积损所渲染出来的这个效果会显示在我们这个肯定的这里。 紧接着呢，我们再设置一下它的一个样式啊，那这些样式的话，比如说这个啊， magan top 啊这些我们就不需要了，对吧？我们把它给干掉，那接着我们再去设置一下 边框的这个编剧，我们也给他不要了。好，那 ok， 那这里的话我们就是 s 跳波底，然后以及我们的这个 ces， 因为我们这一块是整个页面都会进行一个这个展示嘛，那 ok， 我们就是啊，把整个都是百分之百。好，那在这里的话我们就是宽度 百分之一百，然后呢我们再设置一下高度百分之一百，接着我们再设置一下 megan 零， padding 零， 然后呢紧接着我们再设置一下 oflowp 的。好，那 ok， 那这样的话我们，呃就可以了，那我们先画运行一下我们这个内容，我们先看一下有没有问题啊？是不是我们创建的这个就已经能够跑起来了？ 看到了白屏，对不对？那我们看一下 f 十二，然后呢我们看一下控制台，这里的话，他有一个报错啊，他说什么呢？他说，呃，找不到这个元素 id， 那这里面的话肯定是说明我们的这个 stap， 对吧？这里面我们写的有问题， 那这里的话写的什么问题呢？就是说我们这个还没有挂着上来，但是呢已经执行的这一块代码啊，我们找不到这个 id， 对吧？这个元素，那好，那我们就使用什么我们的这个生命周期渲染玩的这个函数啊，那么我们在这一块我们使用一下我们的钩子函数。好， ok， 那在这里面我们导入的是咱们的这个 view。 好，那如果大家对于我们这个 squeeze tappa set tapper 的这个 vivit 啊， viu 三的这种写法呢，不是很熟悉的话，可以看一下我 前面这几期的 d 站的视频，那么有详细的去跟大家去讲解。那好，那大家就啊，如果不熟悉可以回看一下，那接着的话我们来看一下咱们的这个内容，对吧？现在是否已经渲染上来，那就是等我们把这个挂载上来的时候， 好， 那么我们写一个箭头函数，然后呢把这一块代码给它挪过来， 那现在话我们来看一下我们的这个地球，哎，现在就能够正常的一个显示啦，没有任何的问题，对吧？你看我们再刷新一下啊，都是可以的。好，那在这里面的话我们可以什么随意的移动， 那在这边的话，我们还可以看到我们的这个中国，对吧？我们的台湾，好，还有我们的海南以及广东广州啊，都是完全没有问题的，而且我们还可以放大到很大的来看，对吧？好 啊，那在这里面的话，我们可以看到这里的话，就是我们的珠江口了，对吧？然后呢这边是南沙。 好，那接下来的话我们再来啊看一下，那这里的话，我们这里就是有啊， 两二滴的效果啊，就是你可以把它铺成平面，对吧？这种效果也是没有问题的，而且呢我们还可以做到二点五滴啊，就是这种效果啊。 ok 啊，那么在这里的话，我们也可以去做这样子的一个移动的操作。 那在这边的话，我们还可以去把这个，比如说我们现在的这个是什么样一个地图，对吧？我们可以进行这个切换啊，其他的一个地图来进行显示，我们甚至可以比如说换成这样子的， 好，非常的这个方便，对吧？那 ok， 那这就是我们第一节课，我们把 我们的这个 season 啊，通过我们的这个 v 特插件，对吧？我们这个导入进来，并且能够使用啊，好，那 ok， 我们做的第一个 season 应用啊就完成了，那接下来的话我们再来学习下一课的内容。

前端除了可视化还有一个 g s， 哎，就是王猛说的啊，做 g s 开发，那 g s 开发呢，跟可视化呢有千丝万缕的联系，我觉得呢，还是要把它归到一个可视化的大类里边去啊，目前业务中用过这些乱七八糟玩意，这些有些眼熟，有些不太眼熟，好像都是产品级的哈，这些都是基于 h 五的外部 g l 的。 请问在请问一下，在熟练这些使用之后，需要深入学习 wib gl 吗？ wib gl 这个东西哈，你不能把它当成一个单纯的技术来看，就是不要做可视化，那肯做前端可视化，那肯定是要用到 wib gl， 肯定是的，跑步要的，但是呢，微博机油呢？你不是说我专门去看一个课程哎，微博机油就搞定的，咱们也有微博机油的课程对吧，你看完这个能搞定吗？搞不定我，我通过了，通过那个微博机油的课程呢，只是呢，带你入了一个门来看一下前端还可以做这 这些玩意儿，真正你要进入可视化的学习，高等数学必须要过，就到大学里面的数学必须要过的。然后呢是 open gl， 然后是计算机图形学，你不用学的很深，但是呢，基本的东西，核心的概念必须要清楚，然后才是微博基友，微博基友是水到渠成的事，然后呢才是一些地，一些工具库，比方第三，比方说 cgs 啊，然后呢，一些产品级的都是小 case 的啊， 所以说这可视化是一个很大很大的高墙啊，现在公司里的可视化基本上招不到人的，很难很难招到人，基本上都是招进来过后培训啊，王某同学应该知道啊，你在桌子上面的东西应该知道，招进来过后培训，然后是上头先头上手干活吧， 干的好干的差再说，反正能干活了，能干一点东西了，都用一些现成的产品。你不知道他为什么会实现这样的效果，他背后的原理是啥，怎么去调油都不知道，但是他能实现这个效果了， 现在前端整个整个这个方向呢？能够做到这一点就可以了啊。关注都一简介号的同学插播一下，我是袁老师，你能跟着我学到这里，那么我就再送你一个好东西。为此呢，我录制了一套大师课， 这里边一共六个章节，每一节都是你求职比面试和在职提升必须必备的东西， 叫什么世界循环啊，浏览器渲染原理啊，属性描述服啊，还包括几个经典的实战功能案例，甚至唯有的原码思想拆解等等等等。我坦率的讲，凡是里边涉及到的知识、权势的深度都达到了原码的级别， 你基本找不到第二个人能剖析到这种程度的。也就是说，一旦你比面试或者工作当中遇到了这些技术，你表现出来的水准在其他的竞争者中有着压倒性的优势。关注袁老师这么久了，我也帮不 别的忙，那么这套大吃课呢，算是袁老师送给你们这份大礼，不必客气。如何领取？评论区第一条，进咱们的粉丝群，然后根据提示领取就可以了。 呃，老实者，为本 gs 开发应该从哪里开始学起呢？目前很多市面上的公司，公司哈招那个为本 gs 开发的话，他直接招的话都不太容易招多少人，他一般都是招普通的钱多开发者进过过去进行培训的，或者是用一些现成的产品。如果说你要参与这个微博 gs 的核心开发的话， 啊，就刚才我说了一套东西吧，从数学到计算机图形学，到 open gl、 gl， 然后到 wgl 这一套东西，还有一些常见的三分库都得搞清楚。

嗨，大家好，我是古德西风啊，今天呢跟大家分享如何将谷歌地球引入到我们的 机会当中，我们可以将整个 google 的一个数据放入到循环中并使用他们啊，在之前一点零版本的时候会有 api 的限制呢，然后呢就是对我们十分不友好的就是美国信用卡绑定，这个也会难住了很多人 啊，这次版本的更新呢，是二点零就没有这方面的限制了啊，下面呢我们教大家如何进行操作啊。这里面我们打开我们的这个 ipad 这个 平台，然后找到循环商城，这里面直接搜索 season， 直接搜索，然后之后呢我们安装哪个呢？安装 seasom for on real， 我们直接点进去，然后之后点击安装到你对应的版本就可以了。好，这里面我们打开我们的虚幻，然后呢找到插件，这里面搜索 seasom for on real season， 然后之后呢我们勾选，然后右下角会有一个重启，我们重启之后呢打开，打开我们的这个 season 的这个功能，当然如果说你这个地方没有的话，可以在窗口当中也可以进行找到， 找到之后呢这里面呢，呃，有一点先提条件，就是说我们得需要有些科学的手感才能进行连接，我们的一个骨骼的一个 c 增，然后我们点击，点击进行连接， 我们等待一下，然后之后呢我们点击进行连接，当这里面出现这个字就说明连接成功，我们回到我们的虚幻当中， 好，回到循环当中，我们可以看到下面的功能栏就可以进行添加了，但如果说这是英文的，你不太懂的话，可以用那个有道进行截图进行翻译， 哎，我们可以知道这个东西的大概的一个意思。好，我们这里面点击我们这个谷歌的这个三 d 一个自转，然后之后我们点击下面把它对应到我们的一个，哦，对，这里面有一个前提，我们得需要先创建，先创建个关卡 来，不， 然后创建个关卡 啊测试，双击，然后点击保存选选项，哎，啊，他崩了，我们重新再来一下啊。 ok， 刚才崩掉了，我们这里面重新再来操作一遍。这里面还是啊 set them， 然后双击，然后点击保存，然后进入到一个空场景当中，那这里面呢？我们点击第一个，这里慢慢翻一下啊， 谷歌一个逼真的三 d 平铺，呃，三 d 瓷砖，然后之后呢我们点击加号，然后这里面呢我们需要把它放到我们，呃，放到一个现有的一个令牌，呃，这里面我们选择一个默认的一个令牌，然后之后呢点击，点击什么呢？点击我们的一个创建新项目，一个默认令牌， 我们点击啊，这里面呢我们刚点击的时候他可能会缓冲的比较慢啊，我们耐心等待一下，然后之后这里面呢是没有光照的，所以说这里面我们点击无光照查看一下他的一个模型， 看到他的一个呃模型就可以呃数据产生到我们这个面前了，然后之后呢这里面我们需要给他增加一个，嗯，丧尸盖，然后之后呢增加我们的天空的一个亮度， 哎，因为它这里面有自动曝光。好，这里面我们可以看到它的地形和它的一些高度，就会呃生生成啊，这里面我们来到城市这个位置，我们来观察一下， 那么等待一下啊，这个速度，呃缓冲的速度的快慢呢？取决于你的网速，嗯， ok。 这里面就是， 呃他的一个数据，呃古国的一个地图，那这里面呢？他是包含了呃整个一个地球啊，就是不是说就我们这一小块的一个部分 啊？这里面我们给他加大一些，当然这个如果说默认的话，你这个相机速度是三十二到头了，会很慢，这里面我给他增加一下相机的一个速度标量，增加到八，我们可以看到变到二百多，然后之后我们往后拉，我可以看到他是一个地球，整个一个地球的所有的数据。 好，这里面呢如果说是我们需要一个固定的一个位置，比如说我们需要一个呃什么北京啊，或者说是这个美国呀等等一些城市。呃一个位置的话，我们必须要精准的去输入他的一个清晰度，当然输入精锐度 我们需要，呃点击它，然后之后呢在这个里面可以看到它的一个经纬度，呃，当然这个经纬度我们应该如何去找呢？这里面我们打开了它的一个 google map 啊， google map 之后呢我们找到这里面，我们刚视频开头它是一个 ifertita， 这里面我们也定位 ifiertita， 然后之后呢右键， 我们找到这个位置，右键之后呢找到他的一个大概的一个精美度坐标，然后点击就进行了一个复制，复制之后呢我们打开我们的新建文本， ctrl 加 v， 然后呢他就会粘贴到进来，然后之后我们打开我们的虚幻，把它精密度分别复制到这个上面来。 好，嗯，回车他就可以定位之后我们耐心等待一下 啊。这里面有一点也要说的，就是就当我们飞的特别就是拉的特别远的时候，我们再重新去定位我们这个经纬度的时候，他这个看的一个方式就是，呃，有问题的 就是他不正常的一个视角观看，这里面呢，我们直接比如说我们在这个位置，他这个视角是这么一个以地球这么一个形式去观看，我们点击什么呢？我们点击这个前面这个啊 place， 然后之后他就会矫正你的一个当前的一个摄，呃，摄像机， 大家看的这个方式就是对的。然后这里面我们再回到我们的刚才的一个坐标 啊，这里面呢？我们怎么去找？就是有时候可能拉的过远的时候，不知道我们的一个他不没法定的特别呃准确，这里面就看到他的一个呃坐标，那就是说他的 一个上下左右的一个坐标，我们就根据他完之后来到他的一个呃位置就是最正确的。然后到这里面呢，我们再把这个速度缩小点。好，我们等待一下啊，在这呢 f 太大。好，这个呢他的一个速度呢就取决于你的一个网速，他的一个缓冲速度。 好，到这现在呢他是没有光的，这里面我们加一个三 sty， 然后我们把光照打开。好的，这里面有自动冒光，然后之后我们等一下他就恢复一个正常的一个曝光值。好，我们等待一下啊，这个时间我们等待一会，他就会把这些建筑都给你缓冲出来。 呃，这里面我们点击这个 sound sky， 然后它下面呢就可以设置一些时间呐啊，年月日等等一些时间，在这儿给他设置一 个夕阳的感觉吧，比较傍晚的感觉。 呃，然后呢他还有很多一些呃有意思的一些功能。呃，比如说这里面我们可以还可以创建什么呢？创建一个呃类于平面的一个地图，这什么点击他他没有这种高度信息，但是他只是一个平面， 让我们把它显示出来，这里面呃任何的一个东西他得需要等啊，因为你毕竟是呃不是那个国家的，他这个网速还是有一定的。呃慢的。好，这里面我们把这个隐藏 啊，把这个隐藏好，这里面我们就可以看到它是一个带有高度信息的这么一个平面图啊， 二维图啊。然后呢如果说你想在这个基础上呢，我再生成一些建筑，我们可以点击这个什么呢？ o s m 啊，我们进行创建，点击，同样我们也需要等待一小会儿。 哎，我们可以看到他这个建筑就开始进行创建了啊，当然这里面呢他这个曝光可能过高，这里面我们可以不需要用他的一个织带的，我们可以用我们自己的这样的方便可控一些， 更灵活。好，这样呢就生成了一些白膜的一些建筑。好，这里面我们恢复回去啊，把这个隐藏啊，这个隐藏 osm 隐藏掉， ok， 我们就恢复回来 啊。那么剩下的就是还有一些比较有意思的功能啊，添加一些他的个体的一些区域的一些数据，那这里面就可以进行呃添加。 当然如果说是呃不是太懂的话，这里面还有一些学习啊，比如说是学习和添加一些呃有意思的东西。呃，好了，这个呢就是今天分享给大家如何把谷歌地球 球啊引入到虚幻中的方法。如果你喜欢本视频呢，希望你点赞转发啊收藏，感谢你的支持。

那么这部分我们那个完成之后呢？接下来我们如果说想要给这个内这个模型啊，去上一个颜色，你看现在是白膜嘛，白膜肯定比较丑啊，那么如果说我现在想让它的颜色呃更炫酷一点，我怎么样去给他的模型内容去做一个建模处理呢？ 那么我们接下来就来看呃这个建模的部分啊，建模完成之后给它上色的部分。上色的话其实考虑到啊有几种方式啊，第一种呢就直接用颜色去上色，第二种就是我们在处理的时候通过那个着色器去上色啊，这也是我们对应的课间里面给大家去看到的啊，我们可以用 着色器或者说用简单的颜色上色，那我们先给他来演示一下用颜色怎么来上色，用简单的颜色的这个基础概念呢，来上色就直接叫做 color， 给模型来上色，上完色之后，后面你还可以自己去尝试去上那个材质啊，材质的话我们就先不给他去具体介绍了，直接 color color， 然后呢把这些注视掉之后引入 color， 好， 我们在这呢给他去上色。上色的话，颜色上色很简单，直接来到这指定几个内容，一个是 color color 指定什么呢？ 呃，我们导入一下，在 season 里面会给大家提供一个 color 这个类啊，我们直接 as season color， 好， 拿过来之后呢，直接往下面 season color 点，那个 颜色值比较多啊，叫道奇蓝吧， dota dota blue 啊，然后呢我们还可以给它来一个那个呃渐变色，但是我们现在暂时可以先不给他，然后有个颜色混合模式啊，颜色 blend mode， 颜色混合模式，直接按照高亮模式把这个呢导入一下，它里面呢会有一个叫 color， color blend mode， 然后呢把它导进来，这个我们直接取个名字叫 season color。 内容啊，直接丢过来丢在这儿， highlight 或者是 replace 都可以啊，高亮模式等等，那我们再来看一下刷新， 你可以看到颜色已经上上去了吧，这蓝色啊，标标准准的蓝色就已经上去了。好，这个蓝色上去之后呢，接下来我们就可以针对这个蓝色的内容呢，再去做一些，呃，更炫酷的效果 啊，做一些更炫酷的效果，我们把它先放高一点吧，就高一点就高一点，暂时没贴地，不管他，因为现在这个地形这块内容肯定肯定是不平的啊，这里是不平的，所以我们就就直接先这样放在地上啊，就放在地上。好，这颜色呢，你可以看到已经上上去了，就是我们这里给的这个蓝色，这个叫倒齐蓝，如果你现在想让他有一定的透明度的话，直接来个零点八， 看起来是那种镂空的效果，更炫酷啊。好，你看它是透明的，这个这个这个模型是透明的颜色 啊，可以看到山那边的景色啊，这就是基本的这个模型概念。那如果说你只是掌握了这一层，对于上色这部分的话，简单啊，这个目前还是比较简单的，我们先来炫酷的点内容怎么做呢？着色器，着色器在这个里面怎么去应用？我们简单给大家去讲一下 shader 的 基本原理和内容啊。 什么是着色器呢？从我们课间这里可以看得到，着色器啊，其实是在 gpu 上面去运行的一段代码啊，因为我们在加载模型完成之后呢，需要动态地去把它的颜色做一些渲染加工。这个时候你就需要用到 g o s l 来编辑着色器，叫 shader。 然后呢，在三维物体里面啊，我们在通过这个 open g o shadowing language 这个语言叫 g o s l 去编辑这个程序。之后呢，要关注几个点，第一个是顶点着色器，叫 vertex shader， 还有一个是片源着色器 fragment shader， 这两个啊， 顶点着色器呢，是针对某个顶点运行一次，负责计算顶点的最终位置，然后呢是片源着色器，片源着色器的话，是针对每个像素运行一次，然后负责计算该像素的最终颜色， 两个结合着来用啊，那么在 season 里面呢，它的着色器是通过 custom shader 来去完成的，同样你也需要两个着色器代码，一个是 vertex shader text， 还有一个呢，是 fragment shader text， 这两个啊，一个是顶点着色器，一个是片源着色器。好，我现在呢，以最简单的这种方式和这个路径啊，来带大家来去编辑，告诉你怎么来做。 首先同学们不知道的是，在我当前的这个文件夹下面，我可以去建一个叫 shader， 我 在这个里面呢，单独来放我着色器的代码啊，单独放着色器，然后呢，第一个先创建一个着色器的代码，这个叫什么呢？ basic 点注意了，后缀名叫 glsl 回车，这就是着色器的代码啊，基本着色器的代码。这个地方呢，里面呢，我只写一个简单的内容啊， 在那个在呃材质处理完以后，那个渲染啊，默执行，默认 执行什么呢？有一个方法，这个语法的话我就不一一的给大家介绍了啊，它有一个叫 fragment main 这个方法，这个方法呢就就可以理解成像 java 里面的 main 啊，或者说一个叫主方法啊，叫 fragment main。 好， 这个里面呢有几个参数？第一个是 fragment input， f s input， 然后呢还有一个是那个 input input， 呃，叫 in in out， 呃， fragment out， 这个把它导进来。好，然后呢我们就直接可以给它的材质去处理这个颜色了啊，我们这里的话 in out inout 的 话，不给这个，不给这个吧，我们给个 c z output， 它这儿有提示的啊，我们就直接叫 material， 因为我们最终那个给定之后，它的着色器内容呢，是会作用到我们这个材质上面。好，那么接下来呢，我们就可以直接 material 点 diffi 啊，就这个 diffuse， diffuse 好， 保存一下，这个时候当你兴致勃勃地保存完之后，来到 shader 这边，它的加载比较简单啊，直接从这儿呢来一个叫呃， new， 那 个 sh shader 叫 custom shader 啊，直接把它导进来，导进来以后，接下来你到哪里去用呢？在你的模型的身上去用，在这儿用，那这个颜色我就注视了啊，注视颜色，并且呢我把这里改过来，改成 import shader from shader， 然后呢下面这些全部注视掉。 好，接下来我们在 shader 里面去完成代码，这里面有个参数叫 custom shader， 写什么呢？写一个 new custom shader。 好， 这样写完之后里面呢会有一个叫做 fragment shader text， 大家可以看到吧？好，那我如果说自己在这来写的话，当然可以，你看，我直接复制一下啊，我把这个代码复制一下之后直接往这一丢，这是很多同学这样来写的一种方式啊，就比如说有同学之前做过那个三维开发，那你是不是很多时候就是这样来写的？是这样写的同学在评论区扣个一， 是这样写的同学在评论区扣个一啊，这样写不好，虽然说你保存完之后来到这边来一看，你看，哎呦，报错了，好，这样整个效果呢？其实都报错了，就是最后变异的这个错误啊，那你从这里呢，其实可以看得出来，最后我在呃渲染的这一步，其实里面在处理的时候，我们 要用到这个 gsl gsl s s l 这个文件啊，来去做这个处理的话是更好一些的。那这个时候你想到把它删掉，删掉之后呢？你是不是可以把 fragment shader text 引进来？怎么引呢？直接在这儿来引，叫 basic shader 引进来啊，那从哪里引呢？点点斜线 slash 下面的 basic gosl。 好 到这一步，同学们又懵了，哇，这引进来报错了，兄弟，对吧？那说明你对于 vita 的 加载还是没有，还是没有掌握啊？还是没有，你直接来一个 roll 啊，完美了。这个问号 roll 是 什么呢？我们可以想象一下，平常你在用的 vita 啊，用的什么 you 啊，用这些 说不定啊，还是有很多边角的知识。你不知道，像这个问号 ro， 意思就是把它作为原始内容加入进来，或者说呢，其实也有另外一种方法，就是直接在这儿来去安装一个 vt 杠 plug in 杠 glsl 的 一个插件 啊，这样也可以，版本号呢？你可以选择一下，它里面有一个对应的推荐的版本号，比如说一点五点零，我看下是不是最新的啊？是的，确实是一点五点零，但是我们不需要啊，不用，我们直接把它作为这个原始内容问号。 ro 的 方式直接引进来 basic shader 可以了，写完了，你看这样去写的话是不是更舒服？所有这边我只负责界面层的，对吧？我所有的着色器我全部写在这边。写在这边啊，这样去处理 不需要，那我们直接 build 就 可以了，直接 build 就 就可以了。好，我们保存一下，再来去来到这个界面上面来看一下啊。 season material output。 什么什么？这里我写错了吗？我看一下啊，感觉好像是写错了。哦，这，这里不对啊，这这个推荐的话给我乱推荐啊。应该是 c z m model output， 这个自动补全有点坑呢，保存一下好 啊。 c z model output 什么意思？ c z m？ 不知道它这个提示能不能给它关掉。 model material 应该是用这个，这个不能错啊，一错你就用不了了。好，我们来看一下现在是不是有颜色了。 好，很很很舒服吧。哎，这个颜色也上上去了，你看上面还反着光呢，镜像的这种效果啊，那从这边来看，金灿灿的，比刚才我直接给了一个 color， 要炫酷吧啊，直接给了一个 color 要炫酷一些，这个时候呢，有一个细节点，你看为什么它没有颜色？ 朋友们有没有有没有这个概念，为什么它没有颜色好？所以呢，这个里面就有，又有又有一个大的重点叫什么呢？叫材质的上色，材质，上色啊，它其实分为分为一个叫 pbr， pbr 材质，还有呢，那个普通材质叫无光照材质 啊，无光照材质啊，这是两种材质，然后呢，对于反射来说，朋友们来想象一下，之前在那个，呃，这个，这个物理里面学过哪些反射相关的， 对吧？有慢反射，什么镜面反射，透射折射啊，这些都是相关的一些物理知识啊，这个我们就不一个一个给大家去说了，那关于这些物理相关的知识学好之后，其实你再来去做三维方面的这种三维场景的开发，或者说偏向游戏类的这种开发呢，会更得心应手一点啊。好，那么这个 diffuse 呢？它针对的是 p b r 材质才能够上色上去 啊，模型是标准 p b r 这个方式的话，通过 diffuse 它叫慢反射，这个 diffuse 叫慢反射啊，好，那么还有呢？自发光，自发光的话 material 点 emissive， emissive emiss， 这这个啊，它这是自发光。好，我可以让它发个什么光呢？比如说让它发一个，呃，粉红色的光，好，保存一下， 好进来看一下。哦，这个这个就自己发光了吧，这个时候就看到自己发光了，这是自发光，然后刚才配的那个呢，是慢反射啊，慢反射，这个是自发光，这就是一个简单的着色器的语法，简单着色器的语法啊，这个着色器的内容的话，三两句给大家解释 不完，因为它的内容点实在是太多了，所以呢，我们只是通过简单的视例给大家去看到一个点呢，大家就可以理解一个点，理解之后在在你的实际开发里面用上去就可以了啊。

好，紧接着我们就要在这个 view 三里面把我们这个 c 字母给它嵌进去啊，对吧？好，那我们就在这个 a p p 点名页里面来写所有的例子啊，每个例子都写在这个 a p p 点名页里面啊，写好了之后呢，我们把它 打包成另外一个预文件啊，如果说后面复习的话，我们把那个代码贴过来就可以看了。准备好了之后呢，跟我们那个原生的 h t 面一样的啊，给他一个容器码 id series 们 这个问题 i n e。 给大家一个地图容器，紧接着要实力化这个地图了，在那个生命周期，等我们这个组件挂载上去，我们再实力化这个地图，对吧？这就跟我们这个二维地图又找到一个相似点了，所以这个地图软件在我们这个 you 里面使， 使用的时候一定要什么？等我们这个组件，注意听啊，是这个组件，这个 view 组件挂载到我们这个网页上去了，有了这个组件之后，我们再把这个地图挂载到组件上，这个顺序一定不要搞错了。好，那我们就引入一个生命周期嘛，来啊，引炮的 rock， 对吧？等我们这个组件挂载好了，那就是，嗯， monty 的，对吧？这个这个生命周期。好，那我们拿过来啊，它这个键的函数吧。 好，那就跟刚才是一模一样的啊，扭一下，扭一下， says 们点，你看现在写它这个就有提示了，约，对吧？ 好，一样的，把这个是不是放进去就可以了？放进去啊，保存 保存，我们先看一下我们这个界面啊，啊，已经有了，但是还是什么没有这个 token， 对吧？好，我们就从那边把这个 token 给给它复制过来啊？ 我们在这是不是放过透根了？我们把它复制过来放到这个上面就可以了。 好，进来了，没问题啊。嗯，刷一下就可以了。这个标的关掉 啊，跟刚才是不是一样的？所有的操作都是一样的。