百灵鸟：开发应用程序还是网站？哪个更适合您的需求？

做app还是做网站,做网站百灵鸟,为什么大公司不用c 做网站,贵阳网站建设哪家便宜Plongez dans Lyon网站终于上线了。 我们与 Danka 团队和 Nico Icecream 共同努力#xff0c;打造了一个令我们特别自豪的流畅的沉浸式网站。 这个网站是专为 ONLYON Tourism 和会议而建#xff0c;旨在展示里昂最具标志性的活动场所。观看简短的介绍视频后#xff0c;用户…Plongez dans Lyon网站终于上线了。 我们与 Danka 团队和 Nico Icecream 共同努力打造了一个令我们特别自豪的流畅的沉浸式网站。 这个网站是专为 ONLYON Tourism 和会议而建旨在展示里昂最具标志性的活动场所。观看简短的介绍视频后用户可以进入城市的交互式风景如画的地图所有场馆都建模为 3D 对象。 每个建筑物都可以点击进入一个详细说明位置信息的专用页面。 推荐用 NSDT编辑器 快速搭建可编程3D场景。 1、打造沉浸式体验 主要网站导航体验依赖于卡通般的 WebGL 场景其中包含大量景观元素、云彩、动画车辆、波光粼粼的河流当然还有建筑物。 总而言之它由 63 个几何图形、48 个纹理、32234 个三角形以及一些后期处理魔法组成。 当你处理大量对象时必须组织代码架构并使用一些技巧来优化性能。 2、3D场景 所有模型均由才华横溢的 3D 艺术家 Nicolas Dufoure又名 Icecream在 3ds Max 中创建然后使用 Blender 导出为 GTLF 对象。如果你有一些现成的3D模型可以利用那么可以使用这个在线3D格式转换工具将它们转换成GLTF模型这会节省不少时间。 2.1 艺术指导和视觉构成 Nico 和 Danka 团队从地图的早期迭代开始了项目的创作过程并很快确定了低多边形和丰富多彩的艺术方向。 与客户品牌调色板相匹配的早期地图迭代之一 我们知道必须添加两打可点击的建筑物因此我们必须在视觉构图、导航便利性和性能之间找到适当的平衡。 左第一个场景合成测试渲染右早期 webgl 压力测试 为了将绘制的三角形数量保持在最低限度我们还很快决定限制场景左侧和右侧远侧的 3D 对象的数量。 但过了一段时间我们意识到我们实际上必须阻止用户看到这些区域。 这个地方看起来很空不是吗 2.2 相机操作 为了避免平移、缩放和动画之间的任何冲突我很早就决定从头开始编写相机控件的代码。 事实证明这非常方便因为之后为相机可能的位置添加阈值并不困难。 白色三角形代表我们实际的相机范围 这样我们成功地限制了相机的移动同时仍然允许用户探索所有地图重要区域。 2.3 烘焙和压缩纹理 为了节省大量 GPU 工作负载Nico 和我同意的另一件事是用全局照明和阴影烘焙所有纹理。 当然这意味着更多的建模工作如果你的场景需要频繁更改这可能会很烦人。 但它减轻了 GPU 的大量计算负担光照阴影、阴影贴图……在我们的例子中这绝对是值得的。 3D场景建模概述 当处理如此数量的纹理通常为 1024x1024、2048x2048 甚至 4096x4096 像素宽时你应该考虑的另一件事是使用基础压缩纹理。 如果你从未听说过基础纹理基本上比 jpeg/png 纹理占用更少的 GPU 内存。 当它们从 CPU 上传到 GPU 时它们还可以降低主线程瓶颈。 你可以在这里非常轻松地生成基础纹理。 3、代码架构和组织 当需要处理如此多的资源时组织代码的最佳方法是创建几个 javascript 类或函数当然取决于你并将它们组织在目录和文件中。 通常我是这样组织该项目的文件和文件夹的 webgl |-- data | |-- objects.js | |-- otherObjects.js |-- shaders | |-- customShader.js | |-- anotherShader.js |-- CameraController.js |-- GroupRaycaster.js |-- ObjectsLoader.js |-- WebGLExperience.jsdata文件夹包含单独文件中的 javascript 对象以及所有信息shaders文件夹包含单独文件中的所有项目自定义着色器CameraController.js处理所有相机移动和控制的类GroupRaycaster.js处理所有“交互式”对象光线投射的类ObjectsLoader.js加载所有场景对象的类WebGLExperience.js初始化渲染器、相机、场景、后处理并处理所有其他类的主类 当然你可以自由地以不同的方式组织它。 例如有些人喜欢为渲染器、场景和相机创建单独的类。