Web 3d

Auto Layout in Anime.js v4.3 introduces a powerful new feature that simplifies animating layout changes such as display flex/grid/none, enter/leave animations, and position transitions. This version also supports interruptible animations, staggered children animations, and works seamlessly with any easing function. The update is designed to provide a dead-simple API for developers to create smooth and intuitive animations without the complexity of manual setup. ---

James Kane has open-sourced his hit web noir game, "Shadow of the Czar," developed in collaboration with World Labs using their Gaussian splat renderer (SparkJS) and Three.js. The game is available on GitHub and can be played on Viverse. The decision to open-source was driven by a commitment to sharing knowledge and fostering community engagement in gaming.

StringTune-3D is a modular animation framework that allows developers to load and control real 3D models directly in web browsers using HTML, CSS, and JavaScript. The framework emphasizes the Document Object Model (DOM) as the source of truth for animations and interactions, making it easier to manage complex 3D content through declarative programming. This alpha release marks a significant step forward in bringing high-fidelity 3D experiences to the web, leveraging modern web technologies like Three.js for rendering. ---

Digital Life Project 3D (DLP3D) is an open-source framework that leverages Large Language Models (LLMs) to create expressive and customizable 3D characters, set to be showcased at SIGGRAPH Asia 2025 Real-Time Live! in Hong Kong. The framework's potential applications span interactive AI simulations and real-time character development, aligning with advancements in 3D technology and open-source projects like Robbyant's LingBot World and Unreal Engine.

The post highlights the creation of a dreamcore shader by someone associated with @sparkjsdev. Dreamcore is an aesthetic style known for vibrant colors and soft glowing effects, often used in gaming and 3D visuals to create a surreal look. The provided search results offer insights into similar projects, including Minecraft shaders (Results 1-3) and community resources (Result 4), which likely influence the approach to achieving this aesthetic.

The term "corridor" in this context refers to vector art and graphics that depict corridors, which are highly popular for their versatility in design projects. These vectors are available for free or commercial use and can be downloaded from various platforms like Vecteezy, VectorStock, Shutterstock, Dreamstime, and Alamy. The search results highlight a wide range of styles, including school corridors, modern interiors, and high-resolution designs, catering to both personal and professional needs. ---

The recent update to `hashBlur()` introduces support for a mask parameter, enabling distance-based blur effects in Three.js reflectors with fewer lines of code. This improvement builds on existing functionality while adding flexibility for opacity control through masks. The PR demonstrates enhanced performance and visual fidelity, particularly useful for creating realistic reflections in web applications.

The "Softbodies" project by @holtsetio demonstrates real-time tetrahedral finite element method (FEM) models in a web browser using WebGPU and TypeScript. It builds on the WebGL implementation of TetSim by @makeshifted, enhancing it with collision capabilities. This approach leverages modern GPU acceleration for efficient soft-body dynamics simulations.

The post discusses creating a game demo over the weekend using Bolt (Claude Sonnet 3.7) and powered by R3F (React Three Fiber). The user highlights that they built the game without writing a single line of code, leveraging real-time physics for enemy dodging. The demo includes a cloneable character controller project, suggesting an emphasis on physics-based interactions and modular component design in React Three Fiber.

The post outlines the creation of a 3D game starter kit for @cursor_ai using React 19 and React Three Fiber (r3f). The kit leverages predefined .cursor/rules for quick setup and includes a TypeScript configuration. The project also mentions a quickstart video in the comments, suggesting an introductory guide to the implementation. ---

Three.js version r174 has been released, introducing several new features and improvements. This update includes enhanced skinning functionality, support for WebGL 2.0, updated shaders, and performance optimizations. The release also marks the addition of Aleph numeric domain support, further expanding the library's capabilities in 3D graphics rendering. Users are advised to consult the official changelog for detailed updates and migration guidance. ---

A-Frame 1.7.0 has been officially released, introducing several new features and improvements to the platform. This update includes post-processing capabilities, support for ES modules and import maps, enhanced WebGPU functionality, Logitech MX Ink integration, and contributions from 26 developers. The release also provides access to a visual inspector tool and updates to the PowerUp Core library.

The Horizon Worlds Desktop Editor has officially launched in early access, offering users the ability to import assets and utilize TypeScript for constructing intricate 3D environments. This tool aims to empower developers and creators by enabling high-fidelity world building with complex game logic, marking a significant milestone in virtual reality content creation.

PlayCanvas Engine v2.5.0 has been officially released, introducing new features and improvements for developers building 3D web applications. The update focuses on enhancing user experience with tools like the Grid system, Gizmos, Viewcube, and advanced camera controls. Performance enhancements and improved asset handling are also highlighted as key updates. ---

The post discusses the development of a simple visual effects (VFX) engine using Three.js Shading Language (TSL), which is nearing completion for an upcoming chapter in the React Three Fiber Ultimate Guide. The engine integrates Three.js and TSL, leveraging WebGPU for performance and sending "millions of hearts" through visually enhanced web experiences. ---

The article by Hector Arellano on Codrops explores advancements in particle-based fluid simulations using WebGPU, highlighting how these simulations are now achievable in real-time with millions of particles. The author emphasizes the potential of WebGPU for enabling complex visualizations and applications that were previously computationally expensive or impractical. This journey into fluid dynamics demonstrates the growing capabilities of modern web technologies, showcasing how they can be harnessed for visually rich and interactive experiences.

Pillar Valley is a cross-platform video game project developed using Expo and React Native, allowing it to run seamlessly on both iOS and Android devices. The project incorporates app clips for quick interactions and Apple Home Screen widgets for easy access, showcasing its integration with native technologies. ---

The post highlights the process of building an iOS app clip using Expo Router, emphasizing its ability to provide a seamless web experience on iOS devices without requiring users to download or install the app. The integration of deep linking, push notifications, and native features like haptics and gestures is highlighted as key benefits, making Expo Router an ideal choice for creating engaging and efficient mobile experiences. ---

Chrome 131 introduces significant enhancements to WebGPU, focusing on improvements in graphics rendering and developer tools. Key updates include the addition of clip distances in WGSL, new configuration methods via `GPUCanvasContext`, enhanced subgroup operations with inclusive scans, and experimental support for multi-draw indirect rendering. These changes aim to improve performance, flexibility, and ease of use for GPU-accelerated web applications. ---

The post highlights the author's experience using **Three.js** with **WebGPU** for 3D web development, emphasizing a positive experience akin to TSL (likely WebGL or a similar rendering context). The combination of Three.js and WebGPU enables high-performance 3D rendering in the browser, leveraging modern GPU capabilities. The search results confirm that this approach is both powerful and versatile, with applications in cutting-edge web development and interactive experiences.

The 3D Avatar Builder tutorial in the series has been consolidated into a single episode, offering a comprehensive guide for users. This episode includes bonus content on integrating avatars into projects such as the 3rd Person Character Controller and AI Virtual Girlfriend. The final episode covers adding bloom passes, loading screens, animated model transitions, and optimization of the GLB file for better performance. [Result #1] highlights the importance of a structured approach to avatar creation, while [Result #3] emphasizes the need for efficient asset management in 3D applications.

A mesh material color transition using shaders in Three.js involves creating a smooth shift between different colors across a mesh's surface. This effect can be achieved by leveraging vertex colors, noise functions, or gradient transitions, as detailed in various resources. The process typically requires writing custom fragment shaders to control color interpolation and blending, allowing for dynamic and visually appealing results.

The post discusses experimenting with the SDF Lens Blur effect applied to text, leveraging WebGL shaders. The technique involves using computational graphics to create a focal blur effect on text, which can be useful for visual emphasis or readability adjustments. This approach is implemented through custom shaders, potentially in frameworks like Three.js or Godot, as evidenced by the search results.

The developer has introduced a new material called `mesh-transition-material` for Three.js, designed to simplify smooth color transitions in 3D scenes. The material is available in both free and premium versions, with the latter offering advanced features like GLSL shaders for enhanced visual effects. This tool is aimed at developers looking to create seamless animations without compromising performance. ---

Adding Dark Mode to your React Three Fiber (r3f) and Three.js projects involves integrating state management for theme toggling, styling overlays, and adjusting 3D scenes. The process can be streamlined using libraries like Valtio for state management and Tailwind CSS for consistent dark mode styling. A detailed guide is provided in the linked YouTube video, which covers setting up Valtio, creating a toggle switch, applying styles, and optimizing 3D renderings. ---

Drei, a useful set of helpers for React-Three-Fiber, now enables overlaying multiple materials on a single mesh through its MultiMaterial component. This feature allows developers to apply different textures or materials to various parts of a mesh, enhancing visual effects without the need for complex workarounds. For detailed implementation guidance, refer to Michael Gold's notes and examples provided in the search results.

The release of Model Viewer v4.0 introduces significant updates, including an enhanced tone mapping system using Khronos PBR Neutral for more vibrant and precise color rendering. Additionally, an AR mode has been added, enabling users to explore 3D models using headsets like the Oculus Quest 3 [1].

The user attempted to create a quick game using Three.js and Cursor AI. The post references a CodePen example linked to the project. The search results highlight insights into game development, AI tools for coding, and relevant frameworks like Three.js and Phaser.io. A key takeaway is that Cursor AI enables rapid prototyping in game development. ---

Southern Connecticut Gas (SCG), a prominent utility company, has been leveraging advanced gas connector solutions from Metraflex to enhance their infrastructure. These connectors, such as the 3/4 in. MNPT 300 Series Stainless Steel Flexible Straight Gas Connector and the CSA Gas Products, are designed for reliability and performance in demanding environments. Their adherence to industry standards ensures safe and efficient gas service delivery, aligning with SCG's commitment to quality and customer satisfaction.

The Next.js Conf event showcased an innovative 3D badge that refracts light from the HTML page, highlighting cutting-edge web design trends. Made using Three.js and the drei library, this feature is a sneak peek into upcoming case studies by Basement Studio, promising detailed insights into creative development techniques.

The Contra Project Calculator, featured as an Awwwards Site of the Day, utilizes a sophisticated blend of front-end and back-end technologies to deliver an immersive and functional 3D experience. The calculator combines Three.js for 3D rendering with Next.js for server-side rendering and static site generation, ensuring both performance and interactivity. On the backend, Sanity CMS provides robust content management and search capabilities, while Sentry enhances error monitoring and user feedback collection.

The TinyUSDZ library has successfully enabled texture loading for USDZ (USDC, USDA) models in Three.js through its WebAssembly implementation. This integration allows for the display of these currency models with textures in a web browser environment, addressing a key requirement for users looking to integrate digital assets into their applications. ---

New York City’s 2017 lidar dataset, comprising nearly 1TB of data, has been parsed and segmented into over 1 million buildings. This detailed breakdown allows for unprecedented insights into the city's architecture and environment, leveraging advanced technologies like WebGPU for efficient rendering and analysis. The dataset, available through NYC Open Data and supported by tools such as Scan2Plan, represents a significant resource for urban planning and research.

The initial success of displaying USD (USDZ, USDC, USDA) in Three.js using TinyUSDZ WebAssembly demonstrates a lightweight solution for loading these files without external dependencies. However, the current implementation has a significant limitation: it cannot load USD files larger than approximately 5 MB, and adjusting stack or memory size does not resolve this issue.

Learning Three.js is a powerful tool for web developers looking to incorporate 3D graphics into their projects. The author recommends their e-book, *The Three.js Primer*, as an excellent resource for those who prefer books over video tutorials. This book provides a comprehensive guide to using Three.js, a popular WebGL library, for creating interactive 3D experiences on the web. The focus is on practical techniques and real-world applications, making it ideal for both beginners and advanced users. ---

This tutorial demonstrates how to implement a Boids Flocking Simulation using Three.js and React Three Fiber. The simulation allows users to observe the behavior of birds (boids) flocking in 3D space, with interactive controls to adjust their formation and movement dynamics. The tutorial combines 3D rendering capabilities from Three.js with React Three Fiber for React integration, leveraging the Boids algorithm to create a visually engaging and interactive experience.

The latest update to Vector to 3D introduces a significant improvement in mesh-to-SDF (Signed Distance Field) processing by implementing the jump flood algorithm. This change addresses previous performance issues, particularly GPU-related freezes during heavy computations. The new implementation ensures smoother UI operation and faster rendering times. ---

Blend trees in Unity allow for smooth transitions between animation states by combining multiple blend nodes. By chaining these nodes together, you can create complex blending effects that simulate natural movements, such as linear blends used in locomotion systems. Animagica introduces a generalized 2D Blend node, optimized for use with Three.js and web-based applications, offering a versatile tool for animators and developers.

SuperSplat 1.0 is a newly released open-source editor designed specifically for working with 3D Gaussian splats. After over 10 months of development, the tool is now available to the public through PlayCanvas and GitHub. It offers an interactive and user-friendly interface for creating and managing 3D Gaussian splats, making it a valuable resource for developers and artists working in game development and 3D visualization. The editor is accessible via the web, with additional resources and documentation provided on its official website and GitHub repository. ---

The post highlights a tool or website that allows users to browse and inspect Three.js shaders by expanding `<include>` statements in place. This feature simplifies understanding shader code without manually navigating multiple files. The website mentioned appears to provide a centralized interface for exploring compiled Three.js shaders, leveraging WebGL and GLSL technologies.

ThreeTools now supports **ShaderMaterials** in Three.js, allowing users to easily utilize custom shaders for materials. This feature automatically creates inputs for uniforms, streamlining shader development and usage. The integration enhances efficiency for developers working with Three.js, as demonstrated by igloo.inc's implementation. ---

Improving understanding of 3D math involves adopting specific conventions to highlight errors, rather than traditional methods. Avoiding confusing terms like "translation" can enhance clarity in visualization. The focus is on making mistakes apparent and using tools effectively to foster better comprehension. ---

Snapchat's AR authoring tool supports 3D Gaussian splatting, allowing users to scan real-world assets and apply dynamic 3D effects. This feature is powered by Snapchat's Lens Studio, which provides tools for creating interactive augmented reality experiences. The integration of Gaussian splatting enhances visual realism, making AR applications more engaging for users.

The post discusses an update to a custom HLSL node in Unity's Visual Effect Graph (VFX Graph) that now supports multiple outputs. This enhancement allows creators to implement more complex visual effects by combining or processing data in various ways within a single node, expanding the versatility of VFX Graph for developers and artists. ---

The post discusses the integration of "spanking" themes within web-based 3D graphics using tools like Three.js and WebGL. This trend has gained traction with the release of the wiggle library by KMkota0, which likely enhances the interactivity and realism of such visuals. The search results highlight how these technologies are being employed to create immersive experiences, often tied to storytelling or disciplinary narratives. ---

The Wiggle Bones library, developed by @KMkota0, offers a powerful framework for creating and animating bone-like structures within Three.js environments. A recent tutorial demonstrates its integration with React Three Fiber (R3F), providing developers with tools to build interactive 3D animations using simplified bone physics. The library simplifies the process of simulating bone behavior, making it accessible for both experienced and novice developers. The post highlights a YouTube video tutorial and points users to additional resources on Wawa Sensei's platform, which likely provide further technical details and examples for utilizing the Wiggle Bones library effectively. ---

The car configurator in question combines cutting-edge front-end technologies with 3D rendering capabilities to provide an immersive user experience. Utilizing React, Three.js, Hammer.js, and GSAP, the tool allows users to interact with and customize 3D models of cars in a dynamic and visually appealing manner.

The post highlights updates to the Core section of React Three Fiber (R3F), focusing on performance improvements and visual enhancements. The key updates include smoother transitions between chapters and enhanced dynamic lighting per chapter. These updates aim to improve the user experience in R3F's educational course, which teaches developers how to leverage R3F for 3D rendering in React applications.

The development of the new @huly_io landing page involved a comprehensive approach, encompassing branding, design, development, and motion design, with a total cost of $89,775. The project aims to replace multiple tools like Linear, Jira, Slack, and Notion by providing an all-in-one open-source platform (Huly.io). This includes collaboration, project management, communication, and note-taking functionalities in one integrated solution.

Building 3D websites offers diverse methods for creators at various skill levels. Resources outline approaches ranging from traditional web technologies to no-code solutions, catering to both novice and advanced users. These methods emphasize performance optimization and design principles tailored to different project requirements.

Polycam has introduced a new Remesh Tool designed to optimize 3D models, reducing their file size while maintaining visual quality. This tool allows users to compress models, making them load faster and improve performance across various applications. The Remesh Tool is available for immediate use on the Polycam platform at [poly.cam](https://poly.cam).

This tutorial explores the creation of a shape lens blur effect using Smooth Distance Fields (SDFs) in Three.js, leveraging WebGL for enhanced performance and visual quality. The technique demonstrates how to implement this effect on simple shapes, providing both aesthetic appeal and computational efficiency. The post highlights the work of @guilanier, showcasing their implementation and sharing resources for further exploration. ---

The post explores creating a stunning lens blur effect using Soft Distance Fields (SDFs) in Three.js, leveraging WebGL for rendering. The tutorial by Guilanier provides a step-by-step guide to achieving this effect, which is further detailed in multiple sources including Codrops and Silicon Hype. The technique combines mathematical precision with GPU acceleration for efficient performance.

GPU texture interpolation is typically performed using 8-bit fixed-point arithmetic, which is sufficient for color representation but often inadequate for geometric textures like baked SDFs. This limitation affects performance in applications requiring high precision for geometry rendering.

The post discusses an upcoming feature in the SuperSplat Editor where Gaussian splats will be rendered as circles to improve selection and editing workflows. This development aims to enhance usability by making it easier to visualize and manipulate these splats, which are commonly used in 3D applications for effects like smoke, fire, and volumetric objects.

The user has been experimenting with a simple body collider system designed for use in **XRAnimator**. This system is intended to prevent physical avatars from clipping their own bodies when they come into contact, such as when interacting with their hands or other parts of their avatar. The solution is particularly useful for avatars with proportions different from those of human beings (*cough*), which can occur in various applications like virtual performances by VTubers. ---

Babylon.js 7.0 marks a significant advancement in web-based 3D rendering, introducing cutting-edge features and performance improvements. This release underscores the tool's commitment to empowering developers with powerful, accessible 3D capabilities for various applications, from gaming to metaverse development.

The Apple Vision Pro supports vertex colors in USDZ files, but only on visionOS. While Apple's authoring tools do not currently support this feature, users can still generate USDZ files dynamically using third-party tools like USDZExporter, enabling functionality that is otherwise absent in official Apple tools. ---

The latest update to Safari 18 on Apple VisionOS 2 introduces a significant enhancement for WebXR users: native support for Apple Vision Pro's natural input system. This integration leverages the `transient-pointer` mode, enabling seamless interaction with WebXR applications using the Vision Pro's built-in spatial computing capabilities. The implementation marks a milestone in bridging web-based XR experiences with hardware-driven input systems, enhancing usability and performance for developers and users alike. [Result #2][Result #3]

The post highlights the use of **pmndrs/uikit**, a collection of user interfaces for React Three Fiber (R3F), in conjunction with WebXR and the Meta Quest 3 headset. The project draws inspiration from examples by @shadcn, known for their contributions to UI design in XR spaces. The GitHub repository ([Result #1](https://github.com/pmndrs/uikit)) demonstrates how uikit leverages React Three Fiber for creating immersive 3D user interfaces, while the search results provide insights into WebXR compatibility issues and related technologies.

Gaussian Splatting is an innovative technique enabling interactive 3D experiences in web browsers, allowing users to engage with virtual events in real-time. This technology, as demonstrated by projects like Yulei, brings art exhibitions and similar events online, making high-quality 3D experiences more accessible. By leveraging advanced graphics processing, Gaussian Splatting creates immersive environments that feel dynamic and engaging, bridging the gap between physical and digital spaces.

The user has developed a 2D UI library using Three.js to create a small Spotify player for testing and identifying performance issues. The library was designed with basic UI elements in mind, such as buttons and sliders, but faced challenges when incorporating complex visual effects like glassmorphism and rendering large lists of tracks. While the library functions adequately for simple use cases, it requires optimization for more demanding applications. ---

In a recent update to our vehicle system, we've introduced significant enhancements aimed at improving both gameplay and technical performance. The updates focus on better handling, physics simulations, and customization options for players. Additionally, we've implemented a particle system and a cinematic camera mode to enhance visual appeal and user experience. These changes build upon foundational knowledge from vehicle dynamics studies and aim to provide a more immersive and realistic driving experience. ---

The post discusses testing the r3f NPC system with the Ninjario character, utilizing tools like #ecctrl by @AndrewChenE, and addressing technical issues to potentially complete the project soon. Key insights include support for React 19 and R3F v9 (GitHub discussion), benefits of R3F over Three.js, and its integration in games like Ninjario via React Jam.

React Flow is a powerful library designed to streamline the creation of node-based user interfaces (UIs) using React. It offers a flexible and intuitive approach to building complex layouts, enabling developers to represent hierarchical data in an interactive visual form. The library abstracts away the complexities of manual rendering and manipulation, making it easier to build robust and scalable applications.