Mesh from HTML with transforms and types

Questions
, , , , ,
1

Ampersand! I am sharing a working POC for mesh-from-html. It demonstrates a boilerplate of concepts. Features are inspired by: React state, WordPress theme hooks, and XR screen casts.

  • instanced, shader atlas
  • hierarchy, interactive
  • extensible, comments

It is generally bug-free and performant. It can even use WASM OpenCV to turn text/image to paths and extrude! It handles transforms, z-index, mimes, etc… and it will process inline comment nodes as code.

Cheers,
Sk8orDie :womans_hat:

2 Likes
2

This sounds amazing but I don’t understand what it is!!!

3

It’s an Pythagorean torus ref generated from non-Euclidean point cache… just kidding!

It’s a vanilla scaffold to parse vanilla HTML, and output vanilla THREE:

  • One proposed use case: extend an existing 2D webpage with tactile representations for JAWS-type custom interactions. For example, a vision-impaired user could see mime/images with raised balloons.
  • Second proposed use case: preload spritesheet of icon/text and script AJAX updates.
  • Third proposed use case: community editor where CSS artists share “game levels” to “win”.
1 Like
4

Damn that sounds amazing! You still working on this?

5

No, I paused with a few outstanding open issues. Since it’s a scaffold POC (and uncommissioned) I wanted to seek interest: rewrites, competitors, additional boilerplate…? Gemini AI via IDX was insightful, but I think further value would be expert applications. For example, Gemini wouldn’t rewrite my mime-type switch to enable a media wall slider.

I coded it assuming someone may want bits and pieces of it in their own way. Currently, it looks like you would sit down with a friend and scroll them around in a VR headset.

1 Like
6

Please advise: I changed from InstancedMesh to BatchMesh. Now the RawShaderMaterial texture atlas has imploded into origin (0,0). Otherwise the app is the same. :adhesive_bandage: Is the answer obvious? Is this a good candidate to update to TSL WebGPU with a glsl node (i.e. <mat4> and <vec3> but i’m naive)?

Further information: I know the mesh is there because the raycast log hits the HTML element (and I see in the minimap). I even see the texture animation flashing on interaction… but it is stretched like a black hole in lightspeed.

Why: I want BatchMesh for culling and ease of use. I could swap in geometry for element-specific quirks: round corners and form-controlz.

BatchMesh-RawShader
BatchMesh-RawShader1920Ă—973 185 KB

(1) original element (2) origin (3) texture active (4) event dispatch (5) texture atlas