Web 端顶级视效实现：山海鲸端渲染底层原理与发布模式详解

大家好，欢迎大家回到山海鲸的渲染模式系列教程。昨天，我们看了一下山海鲸支持的3种渲染模式的整体概览。今天，我们就来看一下山海鲸支持的最基础的渲染模式，也就是端渲染的渲染设置。

1. 山海鲸的端渲染

我们说到端渲染，再强调一下，山海鲸是可以在Web上达到顶级视效的渲染引擎。而且，我们可以不借助Pixel streaming实现这一效果。其底层原理在于，我们整个渲染系统都是自研的，基于WebGL编写。而大部分其他产品，它们使用的是游戏引擎，游戏引擎底层基于D3D，D3D的很多高级用法都不支持导出到WebGL，所以它们只能导出成Pixel streaming，无法直接在WebGL上进行端渲染。

2. 端渲染的三种模式

好，我们来看一下，山海鲸如果导出一个最基本的端渲染，有哪几种形式。我们前面也简单介绍了，山海鲸有两款软件：一款是编辑器，我们可以使用它进行编辑和移动操作；另一款是查看器，这是我们最终给客户部署的软件。我们也说过，编辑器也可以发布给自己使用。

2.1 直接在编辑器中发布一个网络链接

那我们先来看一下端渲染的第一种模式：直接在编辑器中发布一个网络链接。

这里我们已经发布了，我们先停止发布，重新走一下这个流程。我们点击发布，然后选择第一个Tab项“发布Web链接”。在“发布Web链接”里面，我们可以直接看到这些Web链接的基本设置。默认情况下，我们直接点“开始发布”就可以了。当然，我们也可以进行一些高级设置，比如自定义链接、登录、使用APP控制等。在基础设置里面，我们还可以把iframe嵌到我们自己的其他代码里面。当然，我们也可以去更改一些设置。

大家可以看到，我们点发布后打开链接，会有一个加载画面。如果大家需要替换这个加载画面，可以在项目OEM这边进行替换。我们点击项目OEM，就可以替换掉这些加载画面了。

好，这就是我们最基本的一种模式：在山海鲸中直接发布成一个Web链接。当然，我们这个示例使用了轻3D，我们先把轻3D关掉。上一节课我们设置了轻3D模式，按加载键选择后，我们先把它关闭成不生效，保存一下，再重新刷新一次。

好，这就是我们第一种模式了。我们可以看到，直接有一个加载画面，这个时候，我们就是一个端渲染的模式了。我们可以在Web浏览器中打开它。现在之所以卡，是因为我们开了两个画面，把这个画面关掉，就会稍微好一些。有的时候，GPU释放资源需要一定的时间。

在Web浏览器中，我们也可以直接点全屏，所以这个也可以直接在大屏上进行播放。

好，我们刚刚看到了，我们改了一下轻3D设置，然后这边直接更新了。这就是我们发布成Web链接的属性设置，我们可以更新同步，也就是直接实时更新，一保存项目就自动更新。还有一种方式是手动更新，也就是说我们上线需要一个流程。点了手动更新之后，我们更新一下。

好，这时候假设我要改变一下建筑的位置，改变之后我们保存好，可以看到这时候只显示保存成功，它并不会去改变我们线上发布项目的位置。我们可以把它离得远一点，它也不会去改变我们线上发布项目的位置。我们刷新一下，因为我们现在还是在渲染两个项目，肯定会略微有些卡。可以看到这个位置还是在这里的，为什么呢？因为我们现在选择的是手动更新，我们需要主动去点一下更新。

这样子，我们就很好区隔了编辑环境和线上环境。如果我们希望简单先编辑，现在临时存个草稿，就不要去点更新就行了。

好，这是我们第一种端渲染的发布模式：直接用编辑器发布。

2.2 发布到查看器中去

第二种，我们前面说了，可以发布到查看器中去。我们查看器也是点击发布，然后点击“导出部署文件”。注意这里，我们需要填一个项目码。项目码在哪里找到呢？我们先在我们客户的电脑上安装一个山海鲸查看器，安装完了之后，这里会有个项目码。因为我们有两个项目，这两个项目分别使用的是这两个项目码。那我们现在一个新的项目的话，就会显示一个新的项目码，我们就把这个项目码复制一下。当然，我们这两个项目都很类似，那没关系，我们再部署一次。我们点击这个项目码之后，点“开始导出”。

当然，我们这边有个部署方式，部署方式是有不同的，这也都是方便我们去给客户部署的时候，使用不一样的情况。比如说，我们有时候给客户部署，但是客户不是最终交付，那你可以设置个项目的失效时间。我们这里就以最终部署方式去走。

好，我们点击导出，它会先去计算一下整个项目的一个内容，然后最终把它导出出来。导出出来之后，我们这个项目就和这个项目码进行绑定了。我们到查看器中，就可以导入这个项目码。好，我们先在这里，因为我们前面已经有了，我们就把这个标注为一个“新”。好，然后我们在这边去导入它。导入成功之后它会自动打开，打开之后，我们有两种选择：

第一个选择就是我们所谓的CS模式，也就是说我们现在在这样的一个查看器中打开，我们可以直接点全屏，那这样，我们就已经在这台电脑上进行部署了，然后就直接播放了。

2.3 通过查看器发布成Web链接

当然，我们也可以关掉它，然后我们可以看到，它已经自动帮我们发布了。我们也可以打开这个链接，当然，我们前面说了，云渲染后面也是可以通过这个链接打开的，但这里我们不支持云渲染，是因为我们刚刚是没有去勾选云渲染的这个选项的，所以这里是不支持打开的。

3. 总结

可以看到，好，所以这就是端渲染的三种模式：一种是在编辑器中直接发布；另外一种呢，是我们导到查看器中，用软件的方式打开；第三种呢，是我们通过查看器发布成Web链接。一共三种模式。

好，今天我们学习端渲染的设置就到这里，谢谢大家。