Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set object from JavaScript code #188

Open
wants to merge 16 commits into
base: master
Choose a base branch
from

Conversation

siddancha
Copy link

Description

This PR implements a new command called set_object_from_code that lets the user send a string of native JavaScript/THREE.js code to create a THREE.Object3D. The command's JSON looks like (for example):

{
    type: "set_object_from_code",
    path: "/meshcat/my_object",
    code: `() => {
        const geometry = new THREE.PlaneGeometry(...);
        const material = new THREE.MeshPhongMaterial(...);
        const object = new THREE.Mesh(geometry, material);
        return object;
    }`
}

The code field expects a JavaScript lambda function formatted as a string. The lambda takes no arguments, and returns an object of type THREE.Object3D. Meshcat eval()s the code to create this object, and sets it in the scene tree.

  • This is along the lines of the existing set_render_callback API that also takes a JavaScript lambda function from the user and "eval"s it in Meshcat; however, set_object_from_code evals the code snippet only once as opposed to at every render call.

Motivation

  1. Currently, the only way to set objects in Meshcat is via set_object that takes the desired object's serialized JSON. However, not all THREE.js can be serialized. For example, I want to use the Reflector object [1, 2] to create a reflective floor, as shown in this demo. However, Reflector cannot be serialized because it uses ShaderMaterial [3], which in turn uses dynamic textures that are computed at runtime and cannot be serialized. When I try to serialize by calling Reflector.toJSON(), I get the following warning:

    THREE.Texture: Unable to serialize Texture.

    By letting the user create objects via native JavaScript/THREE.js code, Meschat can support all THREE.js object types, whether they can be serialized or not.

  2. It is often easier to write THREE.js code to create objects than its serialized JSON. The serialization of object types are not well-document, and I have often needed to write native THREE.js code anyway and call the .toJSON() function to understand what the serialization format looks like.

Test example

This PR also adds a test example that creates a reflective plane using THREE.js' Reflector object. The example is located in test/mujoco_floor.html, and produces the following visualization:

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant