Three.js: Rust bindings for three.js

[allsey87]

I have started working on creating bindings for three.js so that it can be used from WebAssembly, in particular, from Rust (via wasm-bindgen). With the current state of WebAssembly, the bindings will work by creating and manipulating three.js objects in the browser's js engine. The aim of this project is to bring the well-tested rendering capabilities and interactivity of three.js to WebAssembly.

@mrdoob do you have any interest in this project? If so, would you be willing to collaborate?

[mrdoob]

Hey! What do you need from me?

[donmccurdy]

Maybe not unrelated? https://github.com/three-rs/three 🙂

[allsey87]

@mrdoob answers to a couple designed related questions from time to time. What is the fastest way to get a complete hierarchy of the classes in three.js?

@donmccurdy not so related actually. This is a three.js inspired project that doesn't render to WebGL or use three.js as far as I tell.

[mrdoob]

@mrdoob What is the fastest way to get a complete hierarchy of the classes in three.js?

Not sure... 🤔

[donmccurdy]

Maybe something like:

npm install --global tree-node-cli
tree src/ -I "src/renderers/webgl|src/renderers/shaders|.d.ts"

Output

├── Three.Legacy.js
├── Three.js
├── animation
│   ├── AnimationAction.js
│   ├── AnimationClip.js
│   ├── AnimationMixer.js
│   ├── AnimationObjectGroup.js
│   ├── AnimationUtils.js
│   ├── KeyframeTrack.js
│   ├── PropertyBinding.js
│   ├── PropertyMixer.js
│   └── tracks
│       ├── BooleanKeyframeTrack.js
│       ├── ColorKeyframeTrack.js
│       ├── NumberKeyframeTrack.js
│       ├── QuaternionKeyframeTrack.js
│       ├── StringKeyframeTrack.js
│       └── VectorKeyframeTrack.js
├── audio
│   ├── Audio.js
│   ├── AudioAnalyser.js
│   ├── AudioContext.js
│   ├── AudioListener.js
│   └── PositionalAudio.js
├── cameras
│   ├── ArrayCamera.js
│   ├── Camera.js
│   ├── CubeCamera.js
│   ├── OrthographicCamera.js
│   ├── PerspectiveCamera.js
│   └── StereoCamera.js
├── constants.js
├── core
│   ├── BufferAttribute.js
│   ├── BufferGeometry.js
│   ├── Clock.js
│   ├── DirectGeometry.js
│   ├── EventDispatcher.js
│   ├── Face3.js
│   ├── Geometry.js
│   ├── InstancedBufferAttribute.js
│   ├── InstancedBufferGeometry.js
│   ├── InstancedInterleavedBuffer.js
│   ├── InterleavedBuffer.js
│   ├── InterleavedBufferAttribute.js
│   ├── Layers.js
│   ├── Object3D.js
│   ├── Raycaster.js
│   └── Uniform.js
├── extras
│   ├── Earcut.js
│   ├── ImageUtils.js
│   ├── PMREMGenerator.js
│   ├── ShapeUtils.js
│   ├── core
│   │   ├── Curve.js
│   │   ├── CurvePath.js
│   │   ├── Font.js
│   │   ├── Interpolations.js
│   │   ├── Path.js
│   │   ├── Shape.js
│   │   └── ShapePath.js
│   ├── curves
│   │   ├── ArcCurve.js
│   │   ├── CatmullRomCurve3.js
│   │   ├── CubicBezierCurve.js
│   │   ├── CubicBezierCurve3.js
│   │   ├── Curves.js
│   │   ├── EllipseCurve.js
│   │   ├── LineCurve.js
│   │   ├── LineCurve3.js
│   │   ├── QuadraticBezierCurve.js
│   │   ├── QuadraticBezierCurve3.js
│   │   └── SplineCurve.js
│   └── objects
│       └── ImmediateRenderObject.js
├── geometries
│   ├── BoxGeometry.js
│   ├── CircleGeometry.js
│   ├── ConeGeometry.js
│   ├── CylinderGeometry.js
│   ├── DodecahedronGeometry.js
│   ├── EdgesGeometry.js
│   ├── ExtrudeGeometry.js
│   ├── Geometries.js
│   ├── IcosahedronGeometry.js
│   ├── LatheGeometry.js
│   ├── OctahedronGeometry.js
│   ├── ParametricGeometry.js
│   ├── PlaneGeometry.js
│   ├── PolyhedronGeometry.js
│   ├── RingGeometry.js
│   ├── ShapeGeometry.js
│   ├── SphereGeometry.js
│   ├── TetrahedronGeometry.js
│   ├── TextGeometry.js
│   ├── TorusGeometry.js
│   ├── TorusKnotGeometry.js
│   ├── TubeGeometry.js
│   └── WireframeGeometry.js
├── helpers
│   ├── ArrowHelper.js
│   ├── AxesHelper.js
│   ├── Box3Helper.js
│   ├── BoxHelper.js
│   ├── CameraHelper.js
│   ├── DirectionalLightHelper.js
│   ├── GridHelper.js
│   ├── HemisphereLightHelper.js
│   ├── PlaneHelper.js
│   ├── PointLightHelper.js
│   ├── PolarGridHelper.js
│   ├── SkeletonHelper.js
│   └── SpotLightHelper.js
├── lights
│   ├── AmbientLight.js
│   ├── AmbientLightProbe.js
│   ├── DirectionalLight.js
│   ├── DirectionalLightShadow.js
│   ├── HemisphereLight.js
│   ├── HemisphereLightProbe.js
│   ├── Light.js
│   ├── LightProbe.js
│   ├── LightShadow.js
│   ├── PointLight.js
│   ├── PointLightShadow.js
│   ├── RectAreaLight.js
│   ├── SpotLight.js
│   └── SpotLightShadow.js
├── loaders
│   ├── AnimationLoader.js
│   ├── AudioLoader.js
│   ├── BufferGeometryLoader.js
│   ├── Cache.js
│   ├── CompressedTextureLoader.js
│   ├── CubeTextureLoader.js
│   ├── DataTextureLoader.js
│   ├── FileLoader.js
│   ├── FontLoader.js
│   ├── ImageBitmapLoader.js
│   ├── ImageLoader.js
│   ├── Loader.js
│   ├── LoaderUtils.js
│   ├── LoadingManager.js
│   ├── MaterialLoader.js
│   ├── ObjectLoader.js
│   └── TextureLoader.js
├── materials
│   ├── LineBasicMaterial.js
│   ├── LineDashedMaterial.js
│   ├── Material.js
│   ├── Materials.js
│   ├── MeshBasicMaterial.js
│   ├── MeshDepthMaterial.js
│   ├── MeshDistanceMaterial.js
│   ├── MeshLambertMaterial.js
│   ├── MeshMatcapMaterial.js
│   ├── MeshNormalMaterial.js
│   ├── MeshPhongMaterial.js
│   ├── MeshPhysicalMaterial.js
│   ├── MeshStandardMaterial.js
│   ├── MeshToonMaterial.js
│   ├── PointsMaterial.js
│   ├── RawShaderMaterial.js
│   ├── ShaderMaterial.js
│   ├── ShadowMaterial.js
│   └── SpriteMaterial.js
├── math
│   ├── Box2.js
│   ├── Box3.js
│   ├── Color.js
│   ├── Cylindrical.js
│   ├── Euler.js
│   ├── Frustum.js
│   ├── Interpolant.js
│   ├── Line3.js
│   ├── MathUtils.js
│   ├── Matrix3.js
│   ├── Matrix4.js
│   ├── Plane.js
│   ├── Quaternion.js
│   ├── Ray.js
│   ├── Sphere.js
│   ├── Spherical.js
│   ├── SphericalHarmonics3.js
│   ├── Triangle.js
│   ├── Vector2.js
│   ├── Vector3.js
│   ├── Vector4.js
│   └── interpolants
│       ├── CubicInterpolant.js
│       ├── DiscreteInterpolant.js
│       ├── LinearInterpolant.js
│       └── QuaternionLinearInterpolant.js
├── objects
│   ├── Bone.js
│   ├── Group.js
│   ├── InstancedMesh.js
│   ├── LOD.js
│   ├── Line.js
│   ├── LineLoop.js
│   ├── LineSegments.js
│   ├── Mesh.js
│   ├── Points.js
│   ├── Skeleton.js
│   ├── SkinnedMesh.js
│   └── Sprite.js
├── polyfills.js
├── renderers
│   ├── WebGLCubeRenderTarget.js
│   ├── WebGLMultisampleRenderTarget.js
│   ├── WebGLRenderTarget.js
│   ├── WebGLRenderer.js
│   └── webxr
│       └── WebXRManager.js
├── scenes
│   ├── Fog.js
│   ├── FogExp2.js
│   └── Scene.js
├── textures
│   ├── CanvasTexture.js
│   ├── CompressedTexture.js
│   ├── CubeTexture.js
│   ├── DataTexture.js
│   ├── DataTexture2DArray.js
│   ├── DataTexture3D.js
│   ├── DepthTexture.js
│   ├── Texture.js
│   └── VideoTexture.js
└── utils.js

[munsocket]

@allsey87 the problem that JS<-->WASM inter-operations is pretty slow and this bindings can be not so good in performance if you send data more than 1-10 in one rAF, look at this comparison https://github.com/ivanceras/sauron-perf. Projects that written completely in Rust looks more consistent. A good mix JS with Rust for example for physics or if you port heavy math to it.

Try to benchmark your solution, sometime I was getting weird result and performance regress when I tried wasm. (self-promotion here https://github.com/munrocket/double.js)

[donmccurdy]

Reportedly it's getting much faster, especially if you can keep the calls monomorphic. Only 1-10 calls per frame would be pretty unfortunate, though, I hope that's not true recently? But I can't see how to count individual calls in the example you link to.

[munsocket]

Probably I took too small numbers and it can be 1000, but anyway it's memory copy from wasm sandbox to js runtime with non zero cost. Pretty easy to shoot in a knee when you create rust bindings to JS library.

[munsocket]

monomorphic

Interesting article, I doesn’t know that it useful for wasm too.

I am suggested similar monomorphic data structure for tags in ‘/examples/file.js’, but we ended up with dictionary with arrays. Little bit unrelated but I hope mrdoob is reading :)

[allsey87]

@donmccurdy thanks for that list of classes, it is at the least a good starting point.

@munrocket so for my use case, I want to connect three.js to nphysics, although my plan is to keep the bindings as consistent as possible with the three.js API so that others can use them for other applications.

Regarding speed in general, there is several proposals at the moment that look like they will make js and wasm interoperability much faster in the near future. This is partially the motivation for developing these bindings, the other part being that it makes sense in the broader scope of a project that I am working on.

[allsey87]

Small update on this: I am working at the moment on automatically generating the bindings by parsing the typescript definition files using SWC's ECMA Parser. This will be much more reliable (and far less mind numbing) than doing the bindings by hand ;)