特效炸裂：小米 SU7 在线特效网站技术不完全揭秘！！！
哈喽，大家好 我是
xy👨🏻💻。用 Three.js 实现 小米 SU7 在线体验，特效相当炸裂！！！
前言
最近一位叫 @GameMCU的大佬用 Webgl、Three.js 等技术实现了一个 小米 SU7 在线体验网站：https://gamemcu.com/su7/被广大网友疯传，效果相当炸裂！
网站首发当天由于访问量过大导致奔溃， 后来可能获得了某里云官方支持!!! 这一波真的要给某里云点赞！
更有网友评论: 这效果和交互完全可以吊打官方和各种卖车的网站了啊
并且 @小米汽车官方:求求了，收编了吧，这能极大提升小米su7的逼格，再用到公司其他产品，能提升整体公司的逼格
废话不多说，直接上效果!!!
效果展示
- 模拟在汽车在道路行驶特效，宛如身临其境
- 流线型车身设计，彰显速度与激情的完美融合。每一处细节都经过精心打磨，只为给你带来最纯粹的驾驶体验。
- 在高速行驶的过程中，风阻是影响车速的重要因素。我们的特效模拟器通过先进的算法，真实还原了风阻对车辆的影响。当你长按鼠标，感受那股扑面而来的气流，仿佛置身于真实的驾驶环境中。
- 雷达实时探测功能可以帮你轻松掌握周围车辆的情况，让你在驾驶过程中更加安心
视频
是怎么实现的
在线体验完@GameMCU大佬的网站之后， 我很好奇大佬是使用什么技术去实现的， 身为前端开发的我， 第一步当然是 F12 打开控制台查看
发现使用的是 Three.js r150 版本开发， 并且还用了一个叫 xviewer.js 的插件，
于是乎我找到了@GameMCU大佬的 github 主页， 在主页中介绍了 xviewer.js:
xviewer.js是一个基于 three.js 的插件式渲染框架，它对 three.js 做了一层简洁优雅的封装，包含了大量实用的组件和插件，目标是让前端开发者能更简单地应用webgl技术。
比较遗憾的是 xviewer.js 目前还没有开源， 不过按照作者的意思是可能会在近期开源。
虽然目前 小米 SU7 在线体验网站没有开源， 但是作者主页开源了另外一个项目: three.js复刻原神启动， 也是一个基于 xviewer.js 开发的在线网站。
通过源码发现作者在项目中写了大量的 Shader， Shader 对于实现复杂的视觉效果和图形渲染技术至关重要，它们使得开发者能够创建出令人印象深刻的3D场景和动画。
Shader 是一种在计算机图形学中使用的程序，它运行在图形处理单元（GPU）上，用于处理渲染过程中的光照、颜色、纹理等视觉效果。
Shader 通常被用于 3D 图形渲染中，以增强视觉效果，使得图像更加逼真和吸引人。
在 Three.js 中， Shader 通常分为两类：顶点着色器（Vertex Shader）和片元着色器（Fragment Shader）。
顶点着色器负责处理顶点数据，如位置、颜色和纹理坐标等，而片元着色器则负责处理像素颜色，包括光照和材质属性。
总之，Shader 在 Three.js 中扮演着至关重要的角色，它们为开发者提供了强大的工具来创建丰富、动态和引人入胜的 3D 图形内容。通过学习和掌握 Shader 编程，开发者可以极大地扩展 Three.js 的应用范围和创作能力。
那么作为一名前端开发人员， 应该怎么快速入门 Shader， 并且用 Shader 创造令人惊叹的交互体验呢？？？
三个学习 Shader 网站推荐
1. The Book of Shaders
网址: https://thebookofshaders.com/?lan=ch
The Book of Shaders 是一个在线学习 Shader 的网站(电子书)，它提供了一系列关于 Shader 的基础教程和示例代码，堪称入门级指南。
2.Shadertoy
Shadertoy 是一个基于 WebGL 的在线实时渲染平台，主要用于编辑、分享和查看 shader 程序及其实现的效果。
在这个平台上，用户可以创作和分享自己的 3D 图形效果。它提供了一个简单方便的环境，让用户可以轻松编辑自己的片段着色器，并实时查看修改的效果。
同时，Shadertoy 上有许多大佬分享他们制作的酷炫效果的代码，这些代码是完全开源的，用户可以在这些代码的基础上进行修改和学习。
除此之外，Shadertoy 还允许用户选择声音频道，将当前帧的声音信息转变成纹理（Texture），传入 shader 当中，从而根据声音信息来控制图形。这使得 Shadertoy 在视觉和听觉的结合上有了更多的可能性。
3.glsl.app
glsl.app 是一个在线的 GLSL (OpenGL Shading Language) 编辑器。GLSL 是一种用于图形渲染的着色语言，特别是在 OpenGL 图形库中。这种语言允许开发者为图形硬件编写着色器程序，这些程序可以运行在 GPU 上，用于计算图像的各种视觉效果。
在 glsl.app 上，你可以：
- 编写和编辑着色器代码：直接在网页上编写顶点着色器、片元着色器等。
- 实时预览：当你编写或修改着色器代码时，可以立即在右侧的预览窗口中看到效果。
- 分享你的作品：完成你的着色器后，你可以获得一个链接，通过这个链接与其他人分享你的作品。
- 学习：如果你是初学者，该网站还提供了很多示例和教程，帮助你了解如何编写各种着色器效果。
参考连接:
来源：juejin.cn/post/7352797634556706831
