Hyper-Realistic Sand with WebGL2
430 points
• 1 day ago
• Article
Link
沙盒模拟器是一款交互式、超逼真的数字体验，旨在直接在桌面、平板电脑和手机的 Web 浏览器中运行。借助 WebGL2 和 JavaScript，它提供了流畅且响应迅速的环境，用户能够在其中实时操控颗粒。界面支持直接互动：用户只需用手指或鼠标光标推动沙粒，就能以更具触感的方式模拟沙子的物理行为。
除了基础互动，模拟器还加入了基于运动的控制，让真实感更进一步。用户可以倾斜设备，使沙子在屏幕上自然滑动；也可以摇晃设备，将沙粒抖散。得益于这些功能，体验仿佛扎根于物理世界：数字画布变成了会随硬件方向与移动而变化的动态沙箱。
项目提供多种审美设置，用户可以选择不同类型的沙子，如 river 、 beach 、 desert 、 volcanic 或 coral 。每种模式都呈现出独特的视觉风格，仿照自然环境中对应的纹理与色彩特征。再加上可以持续不断倾倒新沙的能力，材料来源几乎无穷，让用户能够尽情操纵或堆叠。
功能选项同样延伸到沙子下方的环境，提供 light 、 lock screen interaction 和 screen-off behavior 的可切换设置。用户还可以选择开启 sound，为沙粒的视觉运动增添一层听觉体验。通过将这些实用功能与直观的触摸及运动控制结合在一起，这款模拟器把技术性的 WebGL 演示与放松、富有创意的工具连接了起来。
The sand simulator is an interactive, hyper-realistic digital experience designed to run directly within web browsers on desktops, tablets, and phones. By leveraging WebGL2 and JavaScript, the tool provides a fluid, responsive environment where users can manipulate granular particles in real time. The interface allows for direct interaction, enabling users to push grains with their fingers or mouse cursors, simulating the physical behavior of sand in a tactile way.
Beyond simple interaction, the simulator incorporates motion-based controls to enhance the feeling of realism. Users can tilt their devices to cause the sand to slide naturally across the screen or shake the device to scatter the grains. These features make the experience feel grounded in physics, turning a digital canvas into a dynamic sandbox that reacts to the orientation and movement of the hardware.
The project offers a variety of aesthetic settings, allowing users to select different types of sand such as river, beach, desert, volcanic, or coral varieties. Each setting provides a distinct visual style, mimicking the texture and color profiles found in natural environments. This variety, paired with the ability to continuously pour fresh sand, creates an endless supply of material to manipulate or stack.
Functional options also extend to the environment under the sand, providing toggleable settings for light, lock screen interaction, and screen-off behavior. Users have the option to enable sound, adding an auditory layer to the visual movement of the grains. By integrating these utility features with intuitive touch and motion controls, the simulator bridges the gap between a technical WebGL demonstration and a relaxing, creative tool.
80 comments • Comments Link
• 这是一个令人愉悦的数字玩具范例，创作初衷只是为了享受搭建独特事物的乐趣。
• 移动端整合为体验增添了更引人入胜的层面，尤其是在使用设备方向与 motion inputs 的时候。
• 不同移动设备上的技术表现差异明显，部分用户可能会遇到帧率卡顿（choppy frame rates）或 UI 渲染异常（broken UI rendering）。
• 浏览器安全设置（例如注重隐私的浏览器中对权限的拦截）可能会干扰诸如 motion tracking 等关键互动功能。
• 这套仿真提供了令人印象深刻的物理层次感：不同沙质类型各有特点，且还能呈现诸如水在 stones 周围汇集之类的细微交互。
• 音频设计是最常被吐槽的点之一，许多人觉得当前的音效偏刺耳，且与体验的融合度不够理想。
• 一些用户认为物理效果缺乏动量，指出 particles 会突然停下，或以不够真实的速度下落，从而带来轻微的"uncanny valley"感。
• 交互设计制造了一种出乎意料的真实挫败感：用户会发现数字沙和现实中的对应物一样难清理。
• 在桌面端浏览器上会出现伸缩（scaling）问题：例如缩放后 particle size 会变化，但 coordinate density 不随之调整，从而暴露了底层渲染逻辑。
• 尽管偶尔会遇到技术限制与性能瓶颈，该演示仍因其对现代 Web 能力的高质量展示而获得了广泛赞赏。
这次沙模拟的反馈凸显了人们对那些以创意呈现技术执行细节的、带有高保真质感的浏览器体验的共同喜爱。虽然它凭借真实感赢得了对 physics 和视觉效果的肯定，但讨论也清楚表明：音频设计与性能优化仍是实现流畅无缝用户体验的关键阻碍。来自技术层面的反馈还指出，跨设备兼容性存在挑战——不同硬件能力与浏览器安全策略往往会干扰原本预期的交互。归根结底，它之所以能引发共鸣，是因为它确实捕捉到了一种既真实又有趣的特质：鼓励用户去尝试与探索，即便数字物理有时会带来挫败感。 • This project serves as a delightful example of a digital toy created simply for the joy of building something unique.
• Mobile integration adds a compelling layer to the experience, particularly when utilizing device orientation and motion inputs.
• Technical performance varies significantly across mobile devices, with some users experiencing choppy frame rates or broken UI rendering.
• Browser security settings, such as permission blocks in privacy-focused browsers, can interfere with core interactive features like motion tracking.
• The simulation offers impressive physical depth, including distinct characteristics for different sand types and subtle interactions like water pooling around stones.
• Audio design is a common point of criticism, with many suggesting that the current sound effects feel harsh or poorly integrated.
• Some users find the physics lacking in momentum, noting that particles stop too abruptly or fall at unrealistic speeds, creating a slight "uncanny valley" effect.
• The interaction design creates a surprisingly authentic frustration, as users find the digital sand just as difficult to clean up as its real-world counterpart.
• Scaling issues occur on desktop browsers, where zooming changes particle size without adjusting coordinate density, revealing the underlying rendering logic.
• Despite occasional technical limitations and performance hurdles, the demo is widely appreciated as a high-quality showcase of modern web capabilities.
The reception of this sand simulation highlights a collective appreciation for whimsical, high-fidelity browser-based experiences that showcase creative technical execution. While the physics and visual fidelity are praised for their realism, the discussion reveals a clear consensus that audio design and performance optimization remain significant barriers to a seamless user experience. Technical feedback points to the challenges of cross-device compatibility, where varying hardware capabilities and browser security policies frequently disrupt the intended interaction. Ultimately, the project resonates because it successfully captures a tangible, playful quality that encourages users to experiment, despite the occasional frustrations of digital physics.