Best of 3D — June 2024
- 1
- 2
Theo - t3․gg·2yI can’t believe they built this in React
The post explores the creation of an interactive 3D badge for the Vercel Ship 2024 event using React 3 Fiber, an advanced tool for rendering 3D elements in React. It breaks down the tech stack, including Blender for model preparation, React, React 3 Fiber, and React 3 Rapier for physics. The guide covers setting up a 3D environment, integrating physics, and handling user interactions, offering readers a comprehensive look into developing interactive 3D components on the web.
- 3
Hacker News·2y
nmfisher
Thermion is a framework for building cross-platform 3D applications using Dart and Flutter. It divides its functionality into two packages: 'thermion_flutter' for Flutter-specific tasks, and 'thermion_dart' for general Dart applications. Key components include the ThermionViewer class for managing 3D scenes, and the ThermionFlutterPlugin and ThermionWidget for embedding 3D content within Flutter applications. Thermion supports a variety of functionalities such as scene management, rendering control, and animation.
- 4
Homegrown rendering with Rust
Embark Studios is developing a creative platform using Rust to enable user-generated content with advanced 3D rendering. Initially, they focused on gameplay and other essential features before diving into rendering, resulting in the creation of two renderers with modern features like ray tracing and real-time global illumination. They introduced an experimental renderer, 'kajiya,' which is open-sourced but still a work in progress. For production, they have a more robust renderer built on Vulkan API, which extends 'kajiya' features to support broader device compatibility and gameplay functionalities. The Rust-based `rust-gpu` project allows seamless GPU programming, highlighting the language's potential for future graphics and game development.
- 5
Community Picks·2y
3D in TypeScript using Ray Casting
This post explores the concept of ray casting in a 3D perspective on a 2D map, utilizing TypeScript for implementation. The author explains the basic setup, including the HTML canvas and transforms, and how to map 2D grid coordinates to screen coordinates. The core of the post delves into the mechanics of the ray casting algorithm, involving direction vectors, linear equations, and snapping points to grid boundaries. The author also discusses various considerations, such as handling zero values in directions and remapping mouse movements to grid coordinates. Finally, a hands-on coding session demonstrates the implementation of the ray casting technique.
- 6
- 7
freeCodeCamp·2y
Learn Three.js By Building Five Projects
Learn Three.js by building five projects. The video course covers the basics of setting up a Three.js project, creating the Earth with textures and lighting, building a wireframe wormhole effect, creating transition effects, and adding physics using the Rapier engine.
- 8
Material Maker by RodZilla
Material Maker is a procedural material authoring tool and 3D model painter based on the Godot Engine, available for Windows, macOS, and Linux. It supports creating various types of materials like Static and Dynamic PBR, raymarching, and unlit materials. Most nodes are GLSL shaders, and new nodes can be created by combining existing ones or writing custom shaders. The tool can export materials for Godot, Unity, and Unreal. The software is free and open-source, with support available via GitHub and Discord. It also has a website for sharing materials and brushes.
- 9
- 10
Sphere Rendering
The post discusses the challenges of texturing a sphere and explores the use of a flat disk for texture mapping instead of a UV sphere. It covers the process of creating a pixel shader to recreate the features of a 3D UV sphere mesh and provides insights into surface equations, texture mapping, orientation, rotation, shading, UV discontinuities, polar patches, and atmospheric rendering.
