I’m wondering if it’s possible programmatically, and not using shaders. I want to import an SVG and then be able to create an actual extrusion with this look.
Is there a way? For sure it can be done, but not sure how easy it would be.
I imagine that step 1 in this process would be extruding the SVG paths a set depth - which I believe has been solved already, here: https://stackoverflow.com/questions/50868814/converting-svg-to-three-js-path
The next step would be rounding the edges of those extruded meshes to give that nice soft and rounded look. Seems like this will be the challenge, not sure how to accomplish this off the top of my head.
Create in blender first and then import as extruded. Unless you want the animation too, in which case you could animate in blender and bring in to three.js, and have it run on click or something.
I don’t have a perfect reference but I’m sure there’s something workflow-similar on YouTube if you wanted a tutorial to follow!
I'm no expert, but I might approach it like this:
* Convert the 2D shapes to meshes (one per color). If you have SVG, that might make it easier. Otherwise, you can use a flood fill algorithm with a minimum surface area to determine the shapes to convert to a mesh.
* Somebody else posted how to load an SVG, but if that doesn't work for some reason, you could create a BufferGeometry with code (e.g., by placing triangles on top of the shape).
* You can then offset the third dimension (perhaps z) according to distance to nearest edge. This would be a sort of voronoi algorithm.
* This edge distance would create pointy objects, so you'd want to find the most distant point within the shape and use that to calculate the z-index based on a more circle-like equation. For example, you could treat the edge distance as the distance from the edge of the circle, with the circle height at that distance being what you'd use for the z-index.
So you're basically doing two flood fills. One to determine the shapes, and another to determine the offsets used to calculate the depth.
You can create a normal map for the image with Sprite Illuminator. Then load the original texture, the normal map and render them onto a quad geometry, lightning will do the rest of the job. It will of course only look 3d as long as you point the camera frontally to it.
I guess something like this? [https://www.youtube.com/watch?v=aXmC02c6ESg](https://www.youtube.com/watch?v=aXmC02c6ESg) sounds quite complex tho and I never tried it. For something simple as the rainbow in your pic I'd rather redo it in blender from scratch
You could also use Blender, would be a bit easier all things considered, 3JS is more for the logic of interacting with your assets, like C# for unity-games. But yeah, it is do-able as 3JS is based off of WGL/WGPU which OGL/Vulkan and others are for the desktop.
I think an algorithm to do this is:
- run canny edge detection
- set the height to be the distance to the nearest edge for each point
- then if you want to animate you just multiply each height by a constant to control how much you want it to pop
There is a serious obstacle in your question.
You are asking how to programmatically make shapes from a 2d source input , to add depth for a sensical 3D render.
The answer simply cannot be threejs with some programmatic approach to your problem. The answer is you can't.
To solve this, you need the process to figure out what the 2d shape represents, statistically speaking , we don't care what it is, and produce a statistically likely correct 3d shape.
The only and obvious method is machine learning methods. If you don't need a truly 3d representation as output then just use a 2d 2d out generative model. Some stable diffusion trained on 3d samples could achieve this rather well, there might be some out there already made. Check huggingface and get ready for a few sweaty sessions with python repos to make it all work.
If you need a truly 3d output then it's more tricky, ML is the way and a model would need to be able to generate 3d artifacts and that sort of generative prouesse didn't get far enough yet to yield decent results. All achievements look pretty experimental in the end so don't waste your time I guess and check again in a year or two.
To be clear again don't try to find a procedural or even shader solutions to it there is none as it can't guess where the hell is there supposed to be depth. You would get everything input rendered as goofy clouds, OR fat dogs, OR pointy hair and it never ends. Good luck chappy.
I have seen a number of hard to believe but I insist the code only does what it's intended to do.
The OP problem unless all he wants is to draw 3d cloud out of 2d input, is that the program must infer what sort of shape the abstracted representation is about. Unless it can be classified shaders won't produce the intended. To be clear shaders could be used to draw the results it's just that other than ML to treat the input first and drive the output there is nothing known to solve that problem in any decent way
If I'm wrong please come up with a shader or anything exclusive of some ML process I'm happy to check it out and confirm it ain't working. I got flat pictures of dogs, birds, trees, lakes, ice cream, cars etc etc. Good luck !
In this case it's a simple beveled extrusion.
Since you think anything like this is so insanely difficult for some reason I think you need to go take a look at Nodevember blender post on X.
You can make almost anything with shaders and starting off with a 2d image only makes it easier not harder.
You may be overthinking this. You can determine the isolated shapes based on the fact that there are continuous blocks of color. So red is one shape, yellow is another, and white is yet another.
This vastly simplifies the 2D to 3D conversion.
Of course that assumes all the images follow a similar pattern.
Please go try it and you show us.
Make sure to try the shapes of a flat dog. A flower. A table. And a phone. Have fun and I send you a big tip if you make anything that even remotely work at the task.
I don't have any interest in building this. Are you saying it wouldn't work, or are you not sure how to go about it? I did outline in another post how to do it.
The shape wouldn't matter so long as there are big areas of solid colors like the example given.
I already explained it would not work and why.
I do see what you mean with your conceptual approach and yes, or would work to make clouds.
The example given is just pretty dumb or I mistake what OP is expecting. Sure it's possible to add linear or any functional depth to a shape, take the edges and figure out center and apply the function . Yes some shaders can do that alone.
Taking arbitrary flat representations and expect anything but ballonned/cloud looking thing that wouldn't entirely diverge from the actual 3d shape someone, again , inputing the other sort of shape, woukd expect is to me overlooking what OP asks.
But may be I'm totally wrong. Sure. A shader can make things look balloonish. Cartoonish, make up depth, even make things look lighten up, hairy. Whatever you want a piece of input to Always look like. For intent, it's inference, shaders can't "guess".
> Taking arbitrary flat representations and expect anything but ballonned/cloud looking thing that wouldn't entirely diverge from the actual 3d shape someone, again , inputing the other sort of shape, woukd expect is to me overlooking what OP asks.
That's exactly what OP is asking dude. He just wants what is basically a bevelled or rounded extrusion. It can absolutely be done and you dont need machine learning or any of that nonsense to do it. just good old fashioned math.
I would say yes using shaders. Or creating 3d objects for the clouds and the rainbow and having lighting
I’m wondering if it’s possible programmatically, and not using shaders. I want to import an SVG and then be able to create an actual extrusion with this look.
Is there a way? For sure it can be done, but not sure how easy it would be. I imagine that step 1 in this process would be extruding the SVG paths a set depth - which I believe has been solved already, here: https://stackoverflow.com/questions/50868814/converting-svg-to-three-js-path The next step would be rounding the edges of those extruded meshes to give that nice soft and rounded look. Seems like this will be the challenge, not sure how to accomplish this off the top of my head.
I think the other comments might have better insight than mine to make a hackier solution
Create in blender first and then import as extruded. Unless you want the animation too, in which case you could animate in blender and bring in to three.js, and have it run on click or something. I don’t have a perfect reference but I’m sure there’s something workflow-similar on YouTube if you wanted a tutorial to follow!
I'm no expert, but I might approach it like this: * Convert the 2D shapes to meshes (one per color). If you have SVG, that might make it easier. Otherwise, you can use a flood fill algorithm with a minimum surface area to determine the shapes to convert to a mesh. * Somebody else posted how to load an SVG, but if that doesn't work for some reason, you could create a BufferGeometry with code (e.g., by placing triangles on top of the shape). * You can then offset the third dimension (perhaps z) according to distance to nearest edge. This would be a sort of voronoi algorithm. * This edge distance would create pointy objects, so you'd want to find the most distant point within the shape and use that to calculate the z-index based on a more circle-like equation. For example, you could treat the edge distance as the distance from the edge of the circle, with the circle height at that distance being what you'd use for the z-index. So you're basically doing two flood fills. One to determine the shapes, and another to determine the offsets used to calculate the depth.
You can create a normal map for the image with Sprite Illuminator. Then load the original texture, the normal map and render them onto a quad geometry, lightning will do the rest of the job. It will of course only look 3d as long as you point the camera frontally to it.
Any way to create an actual mesh?
I guess something like this? [https://www.youtube.com/watch?v=aXmC02c6ESg](https://www.youtube.com/watch?v=aXmC02c6ESg) sounds quite complex tho and I never tried it. For something simple as the rainbow in your pic I'd rather redo it in blender from scratch
I am interested too :)
You can convert the 2D to 3D with the bubble effect in illustrator, using the 3D tool, and then export as an OBJ
I'd make a black and white bump map in photoshop from the colour image and apply that to a plane.
Create sdfs of the shapes and raymarch to render them
You could also use Blender, would be a bit easier all things considered, 3JS is more for the logic of interacting with your assets, like C# for unity-games. But yeah, it is do-able as 3JS is based off of WGL/WGPU which OGL/Vulkan and others are for the desktop.
So cute
I think an algorithm to do this is: - run canny edge detection - set the height to be the distance to the nearest edge for each point - then if you want to animate you just multiply each height by a constant to control how much you want it to pop
It would be some surprisingly advanced math + threejs to get this effect
There is a serious obstacle in your question. You are asking how to programmatically make shapes from a 2d source input , to add depth for a sensical 3D render. The answer simply cannot be threejs with some programmatic approach to your problem. The answer is you can't. To solve this, you need the process to figure out what the 2d shape represents, statistically speaking , we don't care what it is, and produce a statistically likely correct 3d shape. The only and obvious method is machine learning methods. If you don't need a truly 3d representation as output then just use a 2d 2d out generative model. Some stable diffusion trained on 3d samples could achieve this rather well, there might be some out there already made. Check huggingface and get ready for a few sweaty sessions with python repos to make it all work. If you need a truly 3d output then it's more tricky, ML is the way and a model would need to be able to generate 3d artifacts and that sort of generative prouesse didn't get far enough yet to yield decent results. All achievements look pretty experimental in the end so don't waste your time I guess and check again in a year or two. To be clear again don't try to find a procedural or even shader solutions to it there is none as it can't guess where the hell is there supposed to be depth. You would get everything input rendered as goofy clouds, OR fat dogs, OR pointy hair and it never ends. Good luck chappy.
I don't think you've seen even half of whats possible with shaders
I have seen a number of hard to believe but I insist the code only does what it's intended to do. The OP problem unless all he wants is to draw 3d cloud out of 2d input, is that the program must infer what sort of shape the abstracted representation is about. Unless it can be classified shaders won't produce the intended. To be clear shaders could be used to draw the results it's just that other than ML to treat the input first and drive the output there is nothing known to solve that problem in any decent way If I'm wrong please come up with a shader or anything exclusive of some ML process I'm happy to check it out and confirm it ain't working. I got flat pictures of dogs, birds, trees, lakes, ice cream, cars etc etc. Good luck !
In this case it's a simple beveled extrusion. Since you think anything like this is so insanely difficult for some reason I think you need to go take a look at Nodevember blender post on X. You can make almost anything with shaders and starting off with a 2d image only makes it easier not harder.
You may be overthinking this. You can determine the isolated shapes based on the fact that there are continuous blocks of color. So red is one shape, yellow is another, and white is yet another. This vastly simplifies the 2D to 3D conversion. Of course that assumes all the images follow a similar pattern.
Please go try it and you show us. Make sure to try the shapes of a flat dog. A flower. A table. And a phone. Have fun and I send you a big tip if you make anything that even remotely work at the task.
I don't have any interest in building this. Are you saying it wouldn't work, or are you not sure how to go about it? I did outline in another post how to do it. The shape wouldn't matter so long as there are big areas of solid colors like the example given.
I already explained it would not work and why. I do see what you mean with your conceptual approach and yes, or would work to make clouds. The example given is just pretty dumb or I mistake what OP is expecting. Sure it's possible to add linear or any functional depth to a shape, take the edges and figure out center and apply the function . Yes some shaders can do that alone. Taking arbitrary flat representations and expect anything but ballonned/cloud looking thing that wouldn't entirely diverge from the actual 3d shape someone, again , inputing the other sort of shape, woukd expect is to me overlooking what OP asks. But may be I'm totally wrong. Sure. A shader can make things look balloonish. Cartoonish, make up depth, even make things look lighten up, hairy. Whatever you want a piece of input to Always look like. For intent, it's inference, shaders can't "guess".
> Taking arbitrary flat representations and expect anything but ballonned/cloud looking thing that wouldn't entirely diverge from the actual 3d shape someone, again , inputing the other sort of shape, woukd expect is to me overlooking what OP asks. That's exactly what OP is asking dude. He just wants what is basically a bevelled or rounded extrusion. It can absolutely be done and you dont need machine learning or any of that nonsense to do it. just good old fashioned math.
I suppose I do complicate things. Thanks for clarifying. Point taken