首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

大开脑洞,看看您可以用Decentraland SDK构建怎样的景观——聚焦SDK应用:创建一个水下场景

三周前, 我们发布了Decentraland SDK的alpha版本(https://developers.decentraland.org/)。到现在已经开始看到我们开发者社区的朋友使用它进行了一些新颖和令人兴奋的实际应用。我们非常喜欢所有出现在社交媒体上的截图、视频和演示。Alpha版本的SDK是使Decentraland虚拟世界成为现实的第一步,观察社区的成长和使用这些工具是相当令人高兴的。

我们知道不是每个人都有时间去寻找并观摩所有这些创作,所以我们决定开始关注一些我们觉得特别有雄心或有创意的场景。我们希望展示这些新颖的内容将会激励您也卷起袖子,深入我们的开发工具。

建造一片海洋浅滩

我们想要聚焦的第一个项目来自于两名Decentraland团队成员,Juan Cazala(https://twitter.com/juancazala)和Martin Shibuya(https://twitter.com/@martinshibuya)! Juan在我们的dApps团队中工作,团队负责构建所有Decentraland基于以太坊的工具,比如我们的虚拟土地市场(https://market.decentraland.org/)。Martin是Decentraland的艺术总监——你在我们的大部分博客文章中都会发现他的作品。

在我们首次发布SDK之后,我们进行了小型的内部黑客马拉松,这样团队的其他成员就可以使用这个新工具。Juan与Martin合作建立了一个令人惊叹的动态水下主题场景。

技术实现

场景的状态(通常称为游戏开发中的“游戏状态”)是应用包含在SDK中的多用户示例代码(https://github.com/decentraland/sample-scenes/tree/master/08-multiuser-EXPERIMENTAL)在多人服务器上进行维护的。通过在这样的服务器上呈现游戏状态,并将状态广播到每个连接到该地块的每个客户端,Juan能够确保多个用户在相同的位置看到相同的鱼(或鲨鱼)。

为了使场景能容纳多玩家,Juan首先创建了一个常规的WebSocket服务器。然后,对于每个传入的WebSocket连接,他会创建一个新的WebSocket传输(它包含在metaverse-api中),并实例化一个新的RemoteScene传递给每个观察者的浏览器:

在鱼群里一起游动的鱼是根据Juan写的一种群集算法活动的,其中也写入了一个例外 ——鲨鱼会追逐所有的小鱼。他只是简单坡把它作为一个npm包导入:

为了尽可能高效,Juan决定将场景只呈现一次,缓存该状态,然后将缓存状态发送给每个客户端。这确保了场景不会被不必要地渲染,并保证每个客户端都能看到场景的相同状态:

创建模型并添加纹理

您可以使用大多数传统的建模工具,比如Maya(https://www.autodesk.com/products/maya/overview),来创建用于SDK的模型,但是Martin坚持使用Blender(https://www.blender.org/),这是一个非常强大的开源工具。

Martin首先在Blender中创建了他所有的模型,然后把它们放在最后一个场景中。然后,他开始给每个模型贴图。我们经常会遇到关于纹理最佳尺寸的问题——在这个小小的浅水场景中,Martin能够用一个512x512的块包含了几种颜色渐变来贴出所有纹理!

Martin在整个场景中使用了一个512x512像素的纹理。

Martin使用了一种加工过的叫作UV展开的方法,它基本上是将一个3D模型展开成一个二维平面。这使得将2D纹理映射到模型变得很容易。下面灰色形状中的每一个点对应一个模型的顶点,每条线对应一条边。您可以在Blender的文档(https://docs.blender.org/manual/en/dev/editors/uv_image/uv/editing/unwrapping/introduction.html#about-uvs)中了解更多关于展开模型的信息。

通过使用UV展开的办法,Martin将每个模型映射到一个不同的渐变纹理。

Martin用Blender将每个展开的模型映射到其纹理的不同部分。这让他有了富创造性的灵活性,可以使用多种颜色和渐变,而不必创建多个大的纹理。

使用Blender将纹理映射到模型

最后,他将所有的模型导出为.gltf对象文件(我们正在考虑将来使用.glb文件)。

如果您不是一个3D艺术家或建模师(或者您并不认识您可以与之协作的艺术家),仍然有大量的资源用于寻找开源代码、可重复使用的模型,您可以将它们导入到您的场景中。一个很好可供开始的地方是Sketchfab(https://sketchfab.com/)。

马上开始尝试!

你可以自己下载和运行Juan和Martin的水下场景!请确保您已经下载并安装了SDK,运行如下:

接下来,您可以通过运行以下代码来克隆Juan的存储库:

你将必须运行以下代码来进入新的浅水滩场景的目录:

为了运行浅水海滩场景,您必须安装和构建服务器:

cd server

npm install

npm run build

npm start

最后,打开一个新的终端窗口(确保您的服务器还在原来的终端窗口中继续运行),导航回根目录,然后运行:

cd ..

dcl preview

就是这样!通过访问他的GitHub repo,您可以探索Juan的所有源代码来浏览整个repo。请继续关注我们之后聚焦的特色内容,并开始快乐的创建起您自己的内容吧!

请随时跟进Decentraland项目开发的最新动态!与我们保持联系:

加入我们的电报官方中文社区:https://t.me/decentraland_cn

加入我们的官方电报群:https://t.me/decentralandTG

关注我们的微博动态:https://weibo.com/decentraland

加入我们的QQ群:

加入我们的社区聊天Rocket Chat:https://chat.decentraland.org

关注我们的Medium博客:https://blog.decentraland.org

订阅我们的优酷频道:https://i.youku.com/decentraland

加入我们的邮件列表:https://decentraland.org

关注我们的Twitter账号:https://twitter.com/decentraland

扫码加群防失联总是没错哒!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180526G18FD800?refer=cp_1026
  • 腾讯「腾讯云开发者社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 cloudcommunity@tencent.com 删除。

扫码

添加站长 进交流群

领取专属 10元无门槛券

私享最新 技术干货

扫码加入开发者社群
领券