# Show projected 'cursor' on mesh surface **URL:** \ **Category:** Questions\ **Created:** [June 18, 2021, 5:19pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775 "2021-06-18T17:19:47Z")\ **Posts on this page:** 12\ **Page:** 1
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 18, 2021, 5:19pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/1 "2021-06-18T17:19:47Z")
I’m looking for a sanity check on my implementation of how to show a projected brush cursor on a mesh for a “drawing on mesh” operation. I’ve tried searching forums and playgrounds for something similar but didn’t find anything close enough. I want to be able to draw multiple brush sizes and shapes onto the mesh. Currently, I’m using a Dynamic Texture, and manually drawing the cursor onto it with Canvas operations, and mixing that texture with the diffuse via a custom node material. I might move it to it’s own material as we’re already using MultiMaterial on the target. I considered animating a mesh above the target mesh, but was concerned with Z-fighting on that approach. Decals also seemed more suited to a permanent modification of the mesh texture and not ideal for something that follows the cursor. We’re still on Babylon 4.2 if that rules anything out from the 5.0-alpha builds. Any suggestions? ---
**Author:** ![Vandy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vandy/32/3597_2.png) [@Vandy](https://forum.babylonjs.com/u/Vandy)\ **Post date:** [June 18, 2021, 5:55pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/2 "2021-06-18T17:55:23Z")
Could you use a spotlight / projection texture for this? > **[Introduction To Lights | Babylon.js Documentation](https://doc.babylonjs.com/divingDeeper/lights/lights_introduction#projection-texture)** > > Learn the basics of lights in Babylon.js [https://playground.babylonjs.com/#WFS7AT#12](https://playground.babylonjs.com/#WFS7AT#12) ---
**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\ **Post date:** [June 18, 2021, 6:05pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/3 "2021-06-18T18:05:31Z")
You can consider using CustomMaterial or PBRCustomMaterial if your mesh is already using StandardMaterial or PBRMaterial. Please find the documentation for custom material. > [@CustomMaterial Samples](https://forum.babylonjs.com/t/custommaterial-samples/57): > > hi i start write some documentation here for custom material ( its realy easy for me to make it here but i can move it in documentation after that complete ) definition : Custom Material inherited from stable version of Standard material (a carbon Copy of BABYLON.StandarMaterial) when we need CustomMaterial ? : any time you wanna make any custom option but you can’t manage that in standard material . vertex shader definitions : position(readonly) or positionUpdated(vec3) : local position pe… The part you might need is **Fragment\_Before\_FragColor**. You can pass where you want the highlight as a 3D coordinate as uniform input. And then you can modify the color you want to highlight for the area close to the input 3D coordinate. ---
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 18, 2021, 6:59pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/4 "2021-06-18T18:59:16Z")
Great suggestion, and then I could draw the cursor shape on a DynamicTexture to use as the projection texture (since it’s resizable / reshapable). I’m using only part of the StandardMaterial node material setup, only enough to get shadows, so I’ll have to see if I need to bring more of the standard material in or not. Seems like this must be much more performant than redrawing a texture every mouse movement? ---
**Author:** ![Vandy](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/vandy/32/3597_2.png) [@Vandy](https://forum.babylonjs.com/u/Vandy)\ **Post date:** [June 18, 2021, 7:19pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/5 "2021-06-18T19:19:17Z")
Not even sure you need to use the dynamic texture at all per se. You could just have the textures pre-built and swap out the projection texture on the spotlight. But if you have some specific need to generate the texture dynamically I believe that would still work. I think on Node Materials the spotlight would just come in as part of the lighting information. I’ve done it once before, but forget off hand. You can definitely get the spotlight to show on a node material though. And I would think this approach much more performant than the dynamic texture. It would end up being mostly matrix math and the GPU, vs notoriously slow canvas drawing and the CPU. ---
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 18, 2021, 7:36pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/6 "2021-06-18T19:36:49Z")
I brought it in and the light does display on the material I’m using, but it reintroduces an issue I had previously with lighting where everything gets a blue tint. I fixed it previously by reordering some assets and awaiting them before setting up lights, but adding this selection light in where I add the other lights causes the same issue. If I run the inspector, and disable/renable the directionalLight the scene renders normally, but I’m not sure what the root cause is to begin with. Is this something anyone has seen before? I’m not working in playground so would take some time to recreate an example. I suspect it’s some kind of race condition. ---
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 18, 2021, 8:02pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/7 "2021-06-18T20:02:29Z")
It seems like this weird blue lighting issue happens if I create any lights after the DirectionalLight is added to the scene (this one has a ShadowGenerator attached). If I create the SpotLight before this, everything is rendering correctly. I’m glad I can work around it, but I still don’t understand why this happens. ---
**Author:** ![slin](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/slin/32/36084_2.png) [@slin](https://forum.babylonjs.com/u/slin)\ **Post date:** [June 18, 2021, 8:45pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/8 "2021-06-18T20:45:47Z")
I found an example PG based on Fragment\_Before\_FragColor. [https://playground.babylonjs.com/#UIVCZ3#6](https://playground.babylonjs.com/#UIVCZ3#6) ---
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 18, 2021, 8:48pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/9 "2021-06-18T20:48:57Z")
Thanks. I’m on a node material so I’d have to implement that manually, but that’s another option - render the cursor entirely in the shader after passing the point in as a uniform. ---
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 18, 2021, 9:26pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/10 "2021-06-18T21:26:49Z")
Another issue I’m battling using the spotlight is it is illuminating meshes loaded after the spotlight is created even though I’ve set `selectionLight.includedOnlyMeshes = [this.ground];` when I create it. Do I need to start using layer masks to have it only even affect the ground and ignore everything else regardless of when it is loaded? ---
**Author:** ![sebavan](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/sebavan/32/57_2.png) [@sebavan](https://forum.babylonjs.com/u/sebavan)\ **Post date:** [June 18, 2021, 11:58pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/11 "2021-06-18T23:58:10Z")
ohhhh Could you create a quick repro in the playground ? it sounds like a bug to me ---
**Author:** ![Prodigal](https://sea2.discourse-cdn.com/flex024/user_avatar/forum.babylonjs.com/prodigal/32/7821_2.png) [@Prodigal](https://forum.babylonjs.com/u/Prodigal)\ **Post date:** [June 28, 2021, 5:10pm UTC](https://forum.babylonjs.com/t/show-projected-cursor-on-mesh-surface/21775/12 "2021-06-28T17:10:27Z")
I’m thinking this is a race condition. I’m able to replicate it on this playground if I throttle my network [Babylon.js Playground](https://playground.babylonjs.com/#S3AJQD) but that’s obviously because it’s waiting on the texture to load and parse before setting the includedOnMeshes. I can’t get a reproducible test case in the playground otherwise, and so I’m assuming that some of the promises for asset loading in my case aren’t waiting as expected. At any rate, I was able to restructure some code and remove the issue, and will be looking into those asset loading methods as well.