# Help With Projection Textures

**URL:** <https://forum.babylonjs.com/t/help-with-projection-textures/4463>\
**Category:** Questions\
**Created:** [July 12, 2019, 9:45pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463 "2019-07-12T21:45:02Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 12, 2019, 9:45pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/1 "2019-07-12T21:45:02Z")

</div>

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:

 ![PNG](https://us1.discourse-cdn.com/flex024/uploads/babylonjs/original/2X/7/7baa2e5cfcebc6b5ce3bcb55dfa270750ea68d57.jpeg)

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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 12, 2019, 10:12pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/2 "2019-07-12T22:12:46Z")

</div>

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](https://www.babylonjs-playground.com/#11JINV#1)

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 13, 2019, 2:23am UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/3 "2019-07-13T02:23:10Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 15, 2019, 5:04pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/4 "2019-07-15T17:04:46Z")

</div>

You will do it per material but basically yes you will have to do it for all materials that need to have the effect applied 🙂

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 18, 2019, 4:21pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/6 "2019-07-18T16:21:18Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 18, 2019, 4:32pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/7 "2019-07-18T16:32:09Z")

</div>

To help you further I would recommend providing a repro in the playground

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 19, 2019, 9:40pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/8 "2019-07-19T21:40:33Z")

</div>

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

[https://www.babylonjs-playground.com/#J2FUPK#10](https://www.babylonjs-playground.com/#J2FUPK#10)

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 22, 2019, 3:58pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/9 "2019-07-22T15:58:56Z")

</div>

Ok so I see your cat on the house 🙂 It seems to work. So what issues are you facing?

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 22, 2019, 4:22pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/10 "2019-07-22T16:22:26Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 22, 2019, 4:40pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/11 "2019-07-22T16:40:28Z")

</div>

Well I think you can use the emissiveTexture directly and play with uv offset but you will need to provide a good uv mapping and that could be tricky

Maybe we could add an option to set the light in some kind of “decal” mode where it will just add the projection texture and not do any lighting

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 22, 2019, 5:15pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/12 "2019-07-22T17:15:53Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 22, 2019, 5:17pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/13 "2019-07-22T17:17:09Z")

</div>

Very unlikely as the shaders we use are quite complex.

But if you don’t mind creating a feature request in the repo I will try to find time to add that feature for you

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 22, 2019, 5:29pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/14 "2019-07-22T17:29:30Z")

</div>

Will do, and thank you so much for the replies and being patient with my dumb questions.

---

<div class="post-metadata">

**Author:** ![Deltakosh](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/deltakosh/32/26635_2.png) [@Deltakosh](https://forum.babylonjs.com/u/Deltakosh)\
**Post date:** [July 23, 2019, 6:02pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/15 "2019-07-23T18:02:05Z")

</div>

Sorry for my bad first idea 🙂  
So here is another one:  
[https://www.babylonjs-playground.com/#11JINV#65](https://www.babylonjs-playground.com/#11JINV#65)

I create an emissive texture, set it to clamp and then move it with uvOffset

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 23, 2019, 6:26pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/17 "2019-07-23T18:26:32Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 23, 2019, 6:39pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/18 "2019-07-23T18:39:08Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 23, 2019, 6:51pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/19 "2019-07-23T18:51:54Z")

</div>

Yes. How good are you at going through code?

---

<div class="post-metadata">

**Author:** ![etienne212](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/etienne212/32/18183_2.png) [@etienne212](https://forum.babylonjs.com/u/etienne212)\
**Post date:** [July 23, 2019, 6:57pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/20 "2019-07-23T18:57:51Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 24, 2019, 3:30pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/21 "2019-07-24T15:30:28Z")

</div>

ok cool, well then here let me point you to this.  
[http://pryme8.com/keeyah-a-procedural-ninja/](http://pryme8.com/keeyah-a-procedural-ninja/)

> **[Project UV from Plane to Mesh, or like process.](http://www.html5gamedevs.com/topic/38905-project-uv-from-plane-to-mesh-or-like-process/)**
>
> https://www.babylonjs-playground.com/#NAG06Y#5 Ok, so I have my star shape which has all the vertices labeled, as you can see its UV is all sorts of messy. What I am trying to do is figure out a simple way to get its UV to match the plane that is the...

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:

```auto
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.

---

<div class="post-metadata">

**Author:** ![Pryme8](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/pryme8/32/7212_2.png) [@Pryme8](https://forum.babylonjs.com/u/Pryme8)\
**Post date:** [July 24, 2019, 3:35pm UTC](https://forum.babylonjs.com/t/help-with-projection-textures/4463/22 "2019-07-24T15:35:16Z")

</div>

You might also be able to use a spotlight with a projection texture:  
[https://www.babylonjs-playground.com/#FARGN3#2](https://www.babylonjs-playground.com/#FARGN3#2)

[Next page](https://forum.babylonjs.com/t/help-with-projection-textures/4463.md?page=2)