Needle Engine
website·Indexed 35 days ago
https://engine.needle.tools/docs/A framework for building interactive 3D websites and AR content using tools like Unity and Blender. It features a build pipeline for web-optimized glTF export, built-in components for interactivity, and integration with AI tools via the Needle MCP Server and WebMCP. The ecosystem includes Needle Cloud for hosting OpenUSD and MaterialX assets, and the Needle Mesh Baker for 3D model optimization.
What's inside Needle Engine
- FastHDR is a GPU-native environment map format built on KTX2 supercompression (UASTC HDR 4x4). It is designed to replace traditional EXR files to eliminate main-thread decompression and mip generation, preventing frame drops and reducing VRAM usage. Key benefits include significantly faster load times (e.g., ~134ms for 4K), reduced GPU memory footprint (e.g., 12MB vs 256MB for 4K), and smaller download sizes compared to EXR.
Overview of Needle Engine
Needle Engine is a web-native 3D engine that bridges the gap between high-end authoring tools and the web. It allows developers and artists to author scenes in Unity, Blender, or pure code, and export them as glTF (open standard) files that are genuinely part of the web (inspectable in devtools and embeddable in any page). It builds on top of three.js, meaning all rendering goes through three.js and the component model attaches to the three.js scene graph.Overview of Needle Engine
Needle Engine is a web-based 3D engine built on top of three.js. It extends three.js by providing a component system for better code organization, built-in features (physics, XR, networking, particles), visual editing tools via Unity and Blender integrations, and an optimized build pipeline for asset compression. All standard three.js APIs remain fully accessible, allowing developers to mix vanilla three.js code with Needle components.Overview of Needle Engine Accessibility Support
Since v4.15.0, Needle Engine includes anAccessibilityManagerthat automatically maintains a visually-hidden DOM overlay mirroring the 3D scene's interactive elements. This allows screen readers and assistive technologies to discover and navigate 3D content using ARIA roles and labels. The overlay is invisible (1px by 1px) and uses anaria-live="polite"region to announce objects upon hover without stealing focus.Overview of Needle Inspector for three.js
Needle Inspector is a Chrome DevTools extension designed for inspecting and debugging WebGL and WebGPU scenes. It supports three.js, React Three Fiber, and Needle Engine. The tool allows developers to animate the Inspector camera using clips and keyframes. The Pro version includes advanced features such as live property editing on development servers, memory and leak detection tools, AI editing via MCP, and export capabilities.Overview of Needle Engine Component Lifecycle Methods
Needle Engine components use lifecycle methods to execute logic at specific stages of a component's existence. These methods are only called if they are explicitly declared in the component class. To optimize performance, avoid implementing empty methods, especiallyupdate(), as empty loops across many components can degrade performance.Overview of Needle Mesh Baker
The Needle Mesh Baker is a browser-based tool used to generate and optimize 3D models. It reduces triangles and draw calls, bakes appearance into textures or vertex colors, and optimizes skinned meshes while preserving rigs and animation clips. Processing is performed locally on the user's GPU, and results are exported as.glbfiles.Overview of Needle Engine capabilities
Needle Engine is a cross-platform 3D web engine designed to build experiences that run on desktop browsers, mobile AR (including native iOS WebXR), and VR headsets (Meta Quest, Apple Vision Pro) from a single codebase. Key features include:
- Editor Integrations: Full support for Unity and Blender for modeling, materials, and animations.
- Code-First Approach: Ability to build using pure code with three.js.
- Physics: Built-in Rapier physics simulation (rigidbodies, colliders, raycasting, and character controllers) with zero setup.
- Networking & XR: Native support for multiplayer, voice chat, and immersive XR.
- Performance: Optimized glTF-based pipeline for fast loading and small file sizes.
Overview of MaterialPropertyBlocks
MaterialPropertyBlocks allow for per-object material property overrides in Needle Engine (available since v4.14.0). They enable multiple objects to share the same base material while having unique properties (like colors, textures, or lightmaps) without the memory overhead of cloning materials. Overrides are applied dynamically duringonBeforeRenderand restored inonAfterRender. Note that this does not enable GPU batching; for batching, useInstancedMeshorBatchedMesh.Overview of Needle Core Components
Needle Engine provides a set of built-in components that map to functionality commonly found in Unity, Blender, and three.js. These components are used to define scene behavior, rendering, and interaction. Developers can also create custom components or wrappers for functionality not provided out-of-the-box.Overview of Needle Engine features
Needle Engine is a framework for building interactive 3D websites. Key capabilities include:
- Visual authoring via Unity, Blender, or pure code.
- Built-in Rapier physics (rigidbodies, colliders, raycasting, character controllers).
- Integrated multiplayer and voice chat with zero server setup.
- Automatic optimization and compression for smaller file sizes.
- Cross-platform support for desktop, mobile, VR, and AR.
- Hot reload for development and single-command web deployment.
Overview of MaterialX support in Needle Engine
Needle Engine supports the MaterialX specification (version 1.39.4), including OpenPBR, Standard Surface, UsdPreviewSurface, and Unlit Surface nodes, as well as NPR (non-photorealistic rendering) nodes like fresnel effects. It uses the official MaterialX JavaScript library to ensure high fidelity and spec-compliant files that work across web, film, VFX, and e-commerce pipelines.
Key supported features include:
- Image-Based Lighting (IBL) from scene environment maps
- Reflection Probes
- Light sources (Directional, point, and spot; limit of 8 per scene)
- Realtime shadows (Needle Engine 5+)
- Vertex displacement with procedural noise and texture-based displacement (Needle Engine 5+)
- Displacement animation via animated material properties (Needle Engine 5+)
- Alpha mode detection for mask and blend transparency (Needle Engine 5+)
- Texture compression and progressive loading
- Animated material properties for colors, floats, and vectors