How to create world bending effect

Hey, i’ve stumble upon this challenge in my game, i’d tried few times to convert the vertex shader from unity graph example of world bending into glsl but without success, if someone already been in this situation and have hints or glsl example for bending world it would be very helpful, thank you all :slight_smile:

this is the video i’ve tried to convert the shader from and failed…

I would use a renderTarget on a curved surface. This way you doesn’t need any complex shader (or should rather say, three.js natively provide this for you). Look at this example, depending it’s position the camera will “bend” the projected scene on the sphere, could be any shape.
https://threejs.org/examples/?q=cube#webgl_materials_cubemap_dynamic

Then it’s all about how you fine-tune it to create a cool illusion.
And how you tweak interactions (like reverse raycasting mouse and more)

thank you, i’ve tried it on sphere its look good but how do i focus the cube camera like a regular camera looking on the objects around the sphere ?

I’m not sure I understand the question. I suppose you use orbit control? it will not work (require renderer.domElement) because main “normal” camera rendering the sphere should not move, it’s just there to show the projection on the sphere. However your CubeCamera (6 cameras) is like a single regular 3D object with access to matrix, lookAt', position and more.

Check the FPS camera exemple for custom camera/mouse movement. That’s what you want for off-screen-rendering interaction.

I’ve trying to achieve focus on the sphere, see on this video how the scene rotate towards the camera that’s what I want to achieve

I think I saw @mjurczyk demoing something similar

2 Likes

@ofek_nakar have a look at this post
the pen that @mjurczyk shared was a little outdated, i managed to pull it into the latest version here…

this uses extendMaterial by @Fyrestar which also is a bit outdated and uses an old way of importing
* as THREE from 'three'
i made the relative change to this and posted the update here

3 Likes

i’ve try to use this solution but it dont work well with models, they wrapped around this

what is the model meant to be? can you share one of them in this thread?

yes, and thank you for the help :slight_smile:
BirchTree_1.glb (199.1 KB)

i’m not sure how you’re dealing with this tree model, it looks like the scale is 10x too big for the scene setup as it is, you’ll either want to increase the entire scene + camera z distance by 10x first or scale the tree down to 0.1… the tree seems to load fine and behave as expected in the example shared before, i simply scaled the tree geometry down to 0.1 on load…

3 Likes

it works now, i did the scale and translation after i’ve load and cloned the model, i change it and scale&translate it when i load the model and it works, again thank you…