我如何制作 3D 网页

多年之后,我最终决定分享我的作品集。

🔗 https://bruno-simon.com

说实在的,我从来没有想过,也没法说清楚人们会如此喜欢它(作品集),但我真的很高兴,能收到如此多的反馈和赞扬。

一些开发者请求我说明如何完成了它(作品集),需要说明的是,其实这只是一些简单的技术。

这篇文章需要你具有一定的数学知识背景,我努力使你尽可能的明白,即使你不是一个开发者。

希望你会喜欢我作品中的“幕后花絮”!

概念:

起初,我想做一些原始的,令人愉悦的,好玩的,可理解的事情。

我是一个超级玩家,去年也大量的使用了 WebGl 开发了游戏,用游戏内容去实施是一个显而易见的选择。当我还是个孩子的时候,就很喜欢远程遥控汽车,并且在游戏机上花费了大量的时间去玩一款叫做 Micro Machine 的游戏。所以最终的结果是,我决定去构建一片天地,在那里你可以自由自在得驾驶汽车。

我发现物理学在网页中并没有被很好的使用,这就是为什么构成我宇宙的元素是“可碰撞的”。另外,我选择不使用任何接口,这会让体验更加身临其境。

很大一部分灵感来源于我是 Gustavo Henrique 的粉丝,因此我决定尝试这种平整的,具有圆角,多彩小巧的建筑风格,

我希望我的作品是完全个人的,因此我决定独自进行全部的开发。

我知道这个项目会花费我大量的时间,因此我尽可能的让我自己感到快乐。(相信我,我在那辆车上花费了大量的时间埋下彩蛋。)

我相信一句话“你所能制作的最好的游戏,是你愿意花费大量时间去玩的游戏。”

游戏开始

游戏的开始是空间中弹出一块陆地,汽车从天而降并弹起,这时你会注意到物理学的设计。

唯一需要说明的教程是,请用户直接在地面上用方向键进行移动(它没有在任何地方显示,但你也可以按照玩家习惯的方式,使用 WQSD 或者法式键盘中的 ZQSD 进行移动。)

汽车的位置不是一个随机的选择:我希望确保你能在体验到开始就碰到 “BRUNO SIMON” 的标题,这可以最大限度的理解元素是可以被移动的。

为了帮助和指导用户到达正确的方向,我用了一些简单的方法,例如:

这些瓦片的作用象征着有一些线索,帮助用户很容易的明白那个方向有更多的东西。

墙面是边界。

标牌是,没错,你懂得,那是标牌。

有交互的区域,在那里当你开车经过或者用鼠标悬浮,它将会展开。

最后,这片天地被分成五个区域:

    介绍如何导航的简介

    十字路口充当和其他部分的指南和连接

    在广场上玩物理游戏

    我一直在从事的项目(我们不要忘记这是一个作品集)

    有关如何与我联系的补充信息

我发布了这个作品集之后,被问到最多的问题是如何在这个广场上加速。对我而言显然是要用 shift 了,但是对非游戏玩家却不是。所以我决定增加更多的说明。(但为了信息过多,并不直接展示在简介中。)

调试

寻找最佳的颜色,重力,速度,质量,等。有一个调试盘非常重要。作为一个老派的开发者,Dat.GUI 众所周知,我将在项目中一直使用它。(少数几个选择)

贯穿项目的始终,我一直在调试参数,以便于获得最佳的组合。

使用这种调试工具可能会对性能造成不良影响,因此应确保在生产时完全停用它。一个不错的技巧是仅对特定网址启用此功能https://bruno-simon.com/#debug(如果你想玩,它也可以运行。)


渲染

我是用Three.js 对 WebGl 渲染的。我用了这个库很多年,如果没有它,我也不可能完成这个项目。原生的 WebGl 已经优化的足够好,但如果要实现相同的结果,则需要做很多额外的工作。

Samuel Honigstein (@samsyyyy) 用 VAO (Vertex Array Object) 为我提供了一个优化版本的方案,极大地减少了 WebGl 的调用次数。

为了获得更好的分辨率,我用了很多的方法,但有一点你需要明白,这个场景里没有亮光和阴影。至少没有“普遍意义”上的亮光和阴影。这只是幻觉。

Matcaps

Matcaps 是一款很古老但是很有效率的技术。Matcaps 用于对“着色”对象添加纹理。

它使用相机提供的常规关系来选择性的提供纹理上的颜色。

该技术的缺点是您无法使用动态光源,并且如果您绕转对象,则光源总是相对于相机来自同一方向。

地板

地板由始终填充屏幕的简单平面组成。直接用 JS 指定和发送需要创造的 2X2 纹理,着色器就会用 UV 为每个角进行着色。然后,将这些颜色自然插入整个表面。

轻轻地弹起

为了更加真实和更加清晰的效果,我想要增加一个轻轻弹起的效果,由于目前几乎不可能获得具有良好分辨率的真正的WebGL轻弹,因此我不得不找到一种解决方案。

由于地板是场景中最突出的形状,而橙色是鲜艳的,所以我只是在伪造地板的弹跳。

我只计算了顶点到地面的距离,然后乘以“绝对法线”和上轴之间的点积

理论的基础,简单来说:越靠近地面,橙色就会越多。

阴影

这里有两种类型的阴影。

第一种是静态阴影对于静态的元素。

我只是简单的在 Blender 中进行烘烤,以 PNG-8 的格式进行保存,并对其尽可能的压缩。

第二种是动态的阴影对于移动的元素。

这些实现起来有些棘手。

我在每个移动元素下面添加了一个平面,并根据以下内容更新了每个平面:

相关对象的旋转,

它的位置,

它相对地面的距离,

太阳的方向

这些平面上有阴影纹理,并且对象越高,透明度越低。

后期处理

为了使其看起来更加美观,我在屏幕的顶部和底部增加模糊的水平和垂直线。

我还在左侧增加一个巨大的照明点,与假定的太阳光方向一致,使其更加真实,并带来良好和温暖的感觉。

相机

相机是一种简单的透视图,可以看着汽车并随车行驶。

然后,我添加了一个简单的缓动来平滑运动并让用户感觉到速度。

许多测试人员告诉我,“项目”中部分内容的不可见。为了解决这个问题,当用户进入这个部分时,我将相机的位置调整为从上向下看。

我还添加了用滚轮进行放大缩小的功能,提高了可读性。

物理

在物理方面,我决定选择3D引擎。做到这一点的一种方法可能是使用2D引擎并将物体放在地板上,但我想获得更多的真实感。

Cannon.js 是一个非常不错的库,非常实用,但是它缺少实例,因此我在引用库代码时花费了大量的时间来理解应该怎么做。在游戏中玩了几分钟后,我的分辨率下降了。这是因为默认情况下对象并不会被清理,这意味着,碰到的每个对象,即使它们几乎没有移动,也需要测试每个对象在每个像素上的影响。

为了简化物理模型,我创建了更详细的模型匹配最初的外观。Cannon.js 可以处理这些原始模型,然后我根据原始坐标更新了每一像素的 Three.js 集成。

天线的动画是完全按照我的想法完成的,没有任何物理考量。我根据汽车的反向加速度旋转天线,然后用一个力将其推回中心。推力越大,天线越远。

建模

我用Blender 进行建模。我已经使用它一年了,大多数用于网页项目,我认为它很棒。一开始,它并不易于上手,但你一旦开始使用,对控制,快捷方式和界面都是非常有意义的。

我不是 3D 动画方面的专家,因此我觉得这是一个非常好的练习的机会。我建模了一切东西:树木,自己,保龄球,我的狗,是的,我把它放进了我的作品集。(顺便说一句,希望你能知道,他的名字叫做 Sudo。)

在此过程中,我分别对5个部分和一些特定对象建模。

绝大多数情况我会使用Eevee 进行建模。Eevee 是 Blender 用于实时渲染的引擎。它使用 GPU,大多数情况下,他的运行速度也快于 Cycles。不幸的是,它有一些限制,不过我的场景很简单,所以这不是问题。

我使用了带 Draco 压缩功能的 GLTF 导出了每个部分。在这个案例中,Draco 的作用是实时游戏修改器。根据几何图形的不同,文件压缩了 50% 至 70%。我用法线和碰撞图元导出模型,并尽可能减少数据量。

Eevee 由于技术原因不支持烘焙。幸运的是,Eevee和Cycles的渲染效果非常相似。我只需要切换至 Cycles 做地板阴影的烘焙,将它保存为 PNG-8 格式, 然后用 tinyPNG 进行压缩。

声音

也许你已经注意到了,我不是一个声音的设计师。但是我完全相信,在数字产品中,为了获得身临其境的体验,声音是必不可少的。就像我之前说过的,我希望这个项目的所有事情都是由我自己独立来完成的。

为了增加真实感,我需要在声音中添加一些随机的元素。举个例子,在实际生活中,即使你用相同的速度打击相同的点,发出的声音也不是完全相同的。

据我所知,Howler.js可以根据速度的不同控制声音的不同,所以我决定使用它。

像一块砖头掉下来的定时声音是由以下几部分组成的:

检测物理中的碰撞,

测试它的速度,

从一组多个相似的声音中随机播放一个,

随机调整音量和速度,

然后,我还增加了同时播放声音数量的的限制,防止鼓膜破裂流血。

对于引擎,我测试不同速度下引擎的多次重复音。

我根据汽车的加速度添加了速度变化时的声音。

说实在的,对于结果我始终不能完全满意,但我相信,对于一个非声音设计师来说,这是一个不错的开端。

不幸的是,现在很多浏览器阻止任何声音自动播放,除非用户与页面进行交互,而且仅限于触碰和点击。(令人难过的是,没有键盘的交互指令。)这就是开始按钮背后的故事。但是最后我发现,即使整个网站都很轻巧,这也是加载的最好时机。

显然,我还需要找一个介绍这个世界的声音。在寻求最佳音效的过程中,我发现了这种清爽的纸张翻页的声音。我尝试对它进行了一系列编辑,创建了一个动画,当声音播放时,所有的物体都从地面向上升起。我认为这还挺酷的。

细节

我是Metal Gear Solid系列游戏的忠实粉丝,Hideo Kojima(MGS的导演和设计者)教会了一件事,即使并非每个用户都会注意到这些细节,也要花时间打造它。例如:

背光灯

你是否注意到汽车倒车灯是由用户倒车或使用制动器而亮起的?

动画标题

或许你看到了,这一页的标题是一个动画。如果你向前走,动画就会向前走,反之亦然。不幸的是,标题不能被频繁更新。

砖墙

我通过简单的函数创建了不同形状的墙。实际上,也正是这时候,我决定创建一个游乐场。加大油门,保持速度,全力穿过这个墙实在令人满意。

我在积木位置上添加了一些随机性,以获得更多的真实感。

图块

地板上的图块用于创建路径并引导用户。我只创建了5个不同的图块,随机旋转它们,并确保彼此之间永远不会有相同的图块。

移动端

当我在移动设备上进行测试时,我感到非常惊喜,因为分辨率还不错。但是,出于性能和可用性的考虑,我应用了一些优化措施,例如消除模糊,限制像素比率并停用了Three.js对象的矩阵自动更新。

控件部分,我添加了简单的按钮来控制速度,并添加了操纵杆来控制转向。我知道,“没有接口”,但是在手机上我实在找不到其他直接的解决方案。

原文链接

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 216,372评论 6 498
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,368评论 3 392
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 162,415评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,157评论 1 292
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,171评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,125评论 1 297
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,028评论 3 417
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,887评论 0 274
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,310评论 1 310
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,533评论 2 332
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,690评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,411评论 5 343
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,004评论 3 325
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,659评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,812评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,693评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,577评论 2 353