DOCSEARCHbyAlgolia
Submit Docs

Mechaverse

repository·main·Indexed 42 days ago

https://github.com/jurmy24/mechaverse

A project featuring the McUsd Model, a specialized USD test scene based on Minecraft assets used to test material implementations (UsdPreviewSurface), lighting, and scale variants across renderers like NVIDIA Omniverse and USDView. The repository also includes implementations for browser-based physics simulation using the MuJoCo engine and Three.js integration.

Tokens
4.8K
Snippets
16
Records
23
Agent score
54%

What's inside Mechaverse

  1. Overview of the McUsd Model

    main

    The McUsd Model is a test scene designed to demonstrate various UsdPreviewSurface 2.4 materials and USD elements like cameras and light sources. It is based on Minecraft blocks and is available in two scale variants:

    • 1 meter blocks: Standard scale for general use.
    • 10 cm blocks: Scaled down for viewing on mobile devices or XR applications to fit easily within a room.

    The model includes various blocks (diamond, iron, gold, etc.), lava, and environmental lighting (Sun and DomeLight).

    https://erich.realtimerendering.com/mcusd/McUsd.usdz
https://erich.realtimerendering.com/mcusd/McUsd_10cm.usdz

  2. Configure Emissive Scaling for NVIDIA USD Composer

    main

    To ensure emissive surfaces (like lava) provide reasonable light to surrounding objects in NVIDIA's USD Composer, the emissive textures are scaled by a factor of 20. This is implemented in the shader definition:

    def Shader "emissive_texture"
{
    float4 inputs:scale = (20, 20, 20, 1.0)
}

    Note: This scaling applies to textures, not colors, and may need adjustment for other renderers.

    def Shader "emissive_texture"
{
    float4 inputs:scale = (20, 20, 20, 1.0)
}

  3. Quickstart with three.js

    main

    To create a basic 3D scene in three.js, you need to initialize a camera, a scene, and a geometry/material combination (a Mesh). You then use a renderer (such as WebGLRenderer) to draw the scene from the camera's perspective and append the renderer's domElement to the document. Use setAnimationLoop to handle continuous rendering for animations.

    import * as THREE from 'three';

// init

const camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );
camera.position.z = 1;

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setAnimationLoop( animation );
document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

  4. Set up the Camera in USDView

    main

    To view the McUsd scene with the intended perspective in USDView, follow these steps:

    1. Open File: Go to File -> Open and select McUsd.usda.
    2. Show Hierarchy: Press F11 to toggle the hierarchy view.
    3. Expand Root: Double-click the root node in the hierarchy.
    4. Activate Camera: Select the Camera node, right-click it, and select Set As Active Camera from the bottom of the menu.

    Camera Specifications:

    • Field of View: 60 degrees horizontal, ~36 degrees vertical.
    • Euler Angle Order: ZXY (Z: roll, X: pitch, Y: yaw).
    • Focus Hint: Uses custom vector3d omni:kit:centerOfInterest = (0, 0, -850) for UI rotation focus.

  5. Configure Lighting for USDView

    main

    By default, the Sun and DomeLight in the McUsd.usda file are set to be invisible to accommodate NVIDIA's USD Composer. To view them correctly in USDView, you must manually adjust their intensities in the .usda file:

    1. Change the Sun intensity from 1560 to approximately 30000.
    2. Change the DomeLight intensity from 32 to approximately 0.2.

  6. Configure KTX2Loader with Basis Universal Transcoders

    main

    To load .basis or .ktx2 textures in Three.js, you must provide the Basis Universal WebAssembly transcoder files. The KTX2Loader requires two specific files to be present in a reachable path: basis_transcoder.js (the JavaScript wrapper) and basis_transcoder.wasm (the WebAssembly binary).

    Use setTranscoderPath() to point the loader to the directory containing these files before calling detectSupport() and load().

    const ktx2Loader = new KTX2Loader();
// Point to the directory containing basis_transcoder.js and basis_transcoder.wasm
ktx2Loader.setTranscoderPath( 'examples/jsm/libs/basis/' );

// Check if the current renderer/browser supports the transcoder
ktx2Loader.detectSupport( renderer );

// Load the texture
ktx2Loader.load( 'diffuse.ktx2', function ( texture ) {
	const material = new THREE.MeshStandardMaterial( { map: texture } );
}, function () {
	console.log( 'onProgress' );
}, function ( e ) {
	console.error( e );
} );

  7. Configure THREE.DRACOLoader with Draco decoders

    main

    To use Draco compressed meshes in a Three.js application, you must provide the path to the Draco decoder files. This folder contains draco_decoder.js, draco_decoder.wasm, and draco_wasm_wrapper.js.

    There are two variations of these files available:

    1. Default: Latest stable builds.
    2. glTF: Builds specifically targeted for the glTF mesh compression extension.

    You can use either variation with THREE.DRACOLoader by setting the decoder path. You can optionally use setDecoderConfig to force the decoder type if you need to override automatic WASM support detection.

    var dracoLoader = new THREE.DRACOLoader();
dracoLoader.setDecoderPath('path/to/decoders/');
dracoLoader.setDecoderConfig({type: 'js'}); // (Optional) Override detection of WASM support.

  10. Communicate with the USD viewer via postMessage

    main

    The viewer is designed to work within an iframe and listens for specific message types to trigger actions. You can send these messages from the parent window:

    Message TypePayloadDescription
    USD_LOAD_URL{ url: string }Loads a USD file from the provided URL.
    USD_LOAD_ENTRIES{ entries: Array<{path, buffer}>, primaryPath?: string }Loads files from provided memory entries.
    USD_CLEAR{}Clears the current USD stage.

    The viewer responds with status messages such as IFRAME_READY, USD_LOADING_START, and USD_LOADED.

    // Sending a command to the USD iframe
const iframe = document.getElementById('usd-iframe');
iframe.contentWindow.postMessage({
  type: 'USD_LOAD_URL',
  url: 'https://example.com/asset.usda'
}, '*');

  11. Understand Mujoco drag modes

    main

    The Mujoco class switches between two distinct interaction modes based on whether the simulation is paused:

    1. Joint Drag Mode (Paused): When params.paused is true, the jointDragManager is enabled. This allows users to manipulate joints directly while the simulation is static.
    2. Physics Drag Mode (Simulating): When params.paused is false, the dragStateManager is enabled. This allows users to apply forces to bodies in the active physics simulation by dragging them with the mouse.

  12. Configure NVIDIA USD Composer Render Settings

    main

    The McUsd.usda file contains specific render hints for NVIDIA's USD Composer to optimize lighting and quality. These settings are located at the top of the file:

    bool "rtx:indirectDiffuse:enabled" = 1
bool "rtx:raytracing:fractionalCutoutOpacity" = 1
token "rtx:rendermode" = "PathTracing"
float3 "rtx:sceneDb:ambientLightColor" = (0, 0, 0)
    • rtx:indirectDiffuse:enabled: Enables better lighting via indirect diffuse.
    • rtx:sceneDb:ambientLightColor: Set to (0, 0, 0) to turn off ambient lighting when using indirect diffuse.
    • rtx:raytracing:fractionalCutoutOpacity: Improves rendering quality for glass and semitransparent objects.
    • rtx:rendermode: Set to "PathTracing" to request path tracing on load.
    bool "rtx:indirectDiffuse:enabled" = 1
bool "rtx:raytracing:fractionalCutoutOpacity" = 1
token "rtx:rendermode" = "PathTracing"
float3 "rtx:sceneDb:ambientLightColor" = (0, 0, 0)