I’m new to the framework but I’ve been messing around with ways to projecting 2d images onto 3d models. The way that i was attempting to use was by projecting the texture with a spotlight using a projectionTexture. The way the image wraps on top of the model is exactly what i want but is there any way to make the texture its projecting completely opaque so that you are unable to see behind it?
Ex:
If not is there anything I can read up on that may be able to help me achieve this effect? I’ve tried using Decals but the wrapping around wasn’t quite what im looking for and many of the models I work with arent a single coherent mesh that would allow for decals to work properly from my understanding.
Hello and welcome!!
Maybe you can set your texture in the reflectionTexture channel of the material and use the coordinatesMode set to PROJECTION_MODE?
something like that: https://www.babylonjs-playground.com/#11JINV#1
Interesting, so if I’m trying to do this to a gltf model then would i need to go in and add this to each mesh in the model? And would i have to set this property to each new mesh/object i add into the scene? Thanks so much for all the help, that seems to be exactly what im needing.
Sorry for the late reply I’ve been playing around with it for a while and that doesn’t quite do what I’m trying to accomplish. It seems to add a reflection texture onto where the camera is looking, the thing I’m trying to accomplish is to use the spotlights almost as decal generators. in order to simulate a film projector type thing. I’ve had better success in clarifying the image projected by the spot light by changing the diffuse color, but i was trying to make it so that the image being projected was more present and overpowering the model its being projected onto without adding additional glare from the intensity.
Here is an example of what I’m trying to do (I essentially want to do something to decals with these projection textures) the issue being i found decals often wrap around things if there is an abstruction and i want the image to back project behind those obstructions. I was trying to make the light project more rectangular and opaque in order to make the projected images more visible and easier to discern
I was just wondering if there was a way to modify the light to make the cat more opaque in order to make it more visible at higher ambient light levels (or even independent of outside light levels). If i increase the intensity it obviously increases the glare and causes more image distortion. If not is there something else to create the same effect with another technique.
That would be really helpful, I’m working on a project where I’m syncing up models to a video being projected by the spotlight. I originally tried using decal but found issues of it wrapping around in unpredictable ways as well as moving objects going in and out of the “projectors” field of view. Is there something i could do in a custom shader to make override what is currently occuring in the spotlight?
If you have a 3d model of the thing you are trying to project onto you could map its surface to a planar projection and then calculate the projector position by calculating the projectors output ratio to your mapping plane and treat that like a camera frustum/position thing (it would be the same essentially but a reverse of the light) and you should get the position you would have to place your projector in the real world.
I’ll give that a try, do you have any tutorials (whether their in babylon or opengl) or further reading I can go through to get a better handle on the math required?
Pretty decent, I’ve not done graphics specific stuff in a while so some of the more complicated matrix math and shader code is still a little difficult for me, but reading and understanding general source code i can usually figure out.
Is how you could project the plane and then now you would need to calculate the “camera” position from the by using the plane as the frustum.
If you were going to make a plane fit exactly into the “camera frustrum” here is the math for that:
var c = scene.activeCamera;
c.position.z = -1;
var fov = c.fov;
var aspectRatio = engine.getAspectRatio(c);
var d = c.position.length();
var y = 2 * d * Math.tan(fov / 2);
var x = y * aspectRatio;
var output = BABYLON.MeshBuilder.CreatePlane("output-plane", {width: x, height:y}, scene);
reverse that and you can get the position of the projector I believe. Off the top of my head I forget the exact math. Maybe some wizard will chime in with a real algo for you after seeing this.
