2
$\begingroup$

I've been following some tutorials to make some cool stuff using Blender's geometry nodes. I really like this model that reacts to the proximity of an empty - here's the youtube tutorial for a visual understanding.

https://www.youtube.com/watch?v=bzsLYqkeoww&ab_channel=Vipraz

I'm wondering how I could turn this into an interactive web asset. So rather than an empty controlling where the extrusions occur, the users' cursor location on the web page is used. I could, of course, render out an image sequence of the empty moving across the sphere from left to right, and map this animation to the users' cursor location along the x axis of the page. But what if I want the interactivity to respond to the y axis too?

$\endgroup$
4
  • $\begingroup$ If you can bake the animation to a shape key sequence (see blenderartists.org/t/…) you should be able to export that to glTF. But the geometry nodes themselves do not export, so the animation does need to be baked. $\endgroup$ Commented Dec 7, 2021 at 5:46
  • $\begingroup$ @DonMcCurdy Hmm that poses some issues as I'd like it to be fully responsive to cursor location as it is within blender. Baking would restrict it to a specific path that I've set the empty along. Do you know of any way to essentially host Blender's viewport as a widget on a website? I know Blend4Web did this but it is only compatible with 2.79 and earlier. $\endgroup$ Commented Dec 8, 2021 at 12:49
  • $\begingroup$ I'm not aware of something like that unfortunately. This would probably need to be coded in a webgl library like three.js or babylon.js instead. Longer-term there are some efforts (see: MaterialX) to create standards for node graphs that can be used across different software. $\endgroup$ Commented Dec 8, 2021 at 17:29
  • $\begingroup$ I don't do much web programming and maybe this is too hacky, but you could render the scene with the empty at each position on [x,y], and make the web page keep swapping in the appropriate image given the cursor's x,y position? $\endgroup$
    – ajwood
    Commented Dec 27, 2021 at 14:52

1 Answer 1

0
$\begingroup$

Your best bet would be to handle the objects that emerge from the sphere in javascript with three.js so you'd need to:

  • generate N meshes as the shards that emerge from the sphere, and make sure the origin of each shard mesh is at it's base so that in three.js when we initialize the position as 0,0,0 would put the bottom of the shard at the center of the sphere.
  • randomize the rotation of the shards, it's easier to have empty objects as parents for each shard and that way you can randomize the rotation of the empty object having that affect the shard's rotation, and then simply increment each shard mesh's Z position to move them out towards the surface of the sphere.
  • at setup time (not during each update, since this value shouldn't change and it could be expensive to calculate them all) send a raycast from each shard up to the surface of the sphere and get the point where it intersects with the surface, and either push those points with their associated object's ID into an array for later or save them as .userData on each object depending on whether you want your update() function to iterate through three.js scene Objects or iterate through an array with an ID to reference the objects.
  • make a function that gets either touch or mouse position depending on what's available and send the normalized input to a callback as (x, y)
  • in the callback, send a raycast from that point on the camera going straight forward (relative to the camera) which should give you the point on the sphere where it intersects
  • then calculate for each projected point of where the shards would be on the surface if any of them fall within a fixed distance from the point on the sphere where the cursor intersects, and update each mesh's Z position and scale based on how far it is from the cursor position.

Note: it will be more performant to use something like an InstancedMesh for all the shards rather than individual meshes.

$\endgroup$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .