How to moving a decal?

Hi, everyone:
I need some solution about moving a decal.
My idea is to dispose the picked decal then create new one.
But It is obviously slow when moving it.

So, do you have some ideas to moving it?

PG: https://www.babylonjs-playground.com/#EEUVTY#34

Hi Z! Some experts once told me that decals are not designed to be moved. It is because they are created PER a surface-contour (surface bumpy-ness)… and when you move them, they cannot update for changing contours. (must re-create only)

I have started testing a BJS GUI-2d thing.

https://www.babylonjs-playground.com/#14MFVB#4

Our GUI 2d system allows mapping GUI onto a mesh surface [see line 41 - CreateForMesh(ground)].

I am moving-around a GUI buttonControl, but a GUI imageControl or ImageOnlyButton… would also work fine. All GUI controls have a useful .rotation property - for z-rotating the control.

The original heightMap demo… looks different, and has working shadows. I’m not sure why there are differences, yet. AdvancedDynamicTexture (the GUI texture) is different from standardMaterial using diffuseTexture. We can study that more.

Thoughts? I’m just experimenting… barely started. Perhaps this is not the best solution, yet. There could be other ways to simulate moveable decals, so let’s watch for more comments/ideas. Be well, talk soon.

1 Like

That’s brilliant solution. However it change the mesh’s texture, I need keep the texture stable, because the texture has to be set uScale or vScale, the texture changing maybe change these value.

1 Like

Thx.

Yeah, I understand your need for stable base mesh-texture.

Here’s another attempt: https://www.babylonjs-playground.com/#14MFVB#6

This one required a 2nd mesh (a second ground) created in line 28. Notice that ground and ground2 have the same y-position = 0. Maybe we will talk about that… a bit later. Ground2 has no material.

Lines 89/90… notice that I am “offsetting” (sliding-around) the entire ADT.

Notice line 78… the button is added directly-to the ADT, and so, the rect1 is not really used anymore… but… you can activate line 61… to help see/understand what is happening.

To be honest, I don’t understand how/why this is working, but it is. Good shadows and diffuseTexture on original ground. shrug.

If you have a LOT of decals to independently move/position, this is likely a bad solve. But if you are simply moving a single target-reticle/crosshairs on some bumpy ground or mesh surface, then it might be tolerable.

May I ask… do you wish-to drag/drop the decals… with a mouse/pointer?

I am thinking about… when user mouse-grabs decal…

  • dispose decal
  • change pointer-cursor to grasp-hand
  • do dragging/mouse-move (maybe this moves a tiny red-dot real-mesh across surface)
  • then drop (based on red-dot position… IF red-dot “drop target” used)
  • re-create decal there
  • change pointer cursor back to standard
  • dispose red-dot mesh if one was created/used

Thinkin’. Ever see the decalBuilder source code? Babylon.js/decalBuilder.ts at master · BabylonJS/Babylon.js · GitHub Gruesome code, just to make a surface-contour-following “sprite”, eh? :slight_smile:

Here’s another idea. https://playground.babylonjs.com/#CQNGRK#10

I don’t know who made THAT playground, but it appears to be a “movie projector”… which means it is also a “slide projector”. In effect, you could “project” an image onto any surface, using a spotlight… and it would be surface-contour-matching. Again, not usable for a scene with LOTS of (sim-) decals, but for 1-2 (sim-) decals… it might be ok. hmm. (beard scratch)

I wonder if a spotlight could project rectangular… instead-of circular. Could be pertinent… for us. Also, light would need to be directly above decal position… “head-on”, so-to-speak. (orthogonal/perpendicular to projection surface - to minimize image “skew”.)

I wish we could get more comments from others. These forum folk are innovative as hell. I KNOW they have some more ideas… they just forgot they did. :slight_smile: I wonder if there is a thing called a “shader decal” and if that would be different, somehow. hmm (again)

2 Likes

Update: I found a cleaner spotlight “projectionTexture” thing… https://playground.babylonjs.com/#CQNGRK#441 Also, a spotLight COULD become rectangular… or ANY shape, by using a shadow-casting “snoot”. (think wide-bordered picture frame… positioned in-front-of spotlight source). shrug.

1 Like

Thx for working on it. These days, I am looking for the source code of creating decal.
I am so happy to see what you have done.
Firstly, I do wish to drag/drop the decal with pointer. You can see my pg, I have done the dragging things.
Secondly, your additional attempt is working for me. I will accept this method for my project. Maybe need to learn about Babylon’s GUI.
Finally, The spot light solution may be more like a trick. I have no idea how to control the light’s direction & position with one pointer.
At last again, Hope you have a good emotion eveyday. Best wish.

1 Like

Yeah. good question. But, I DO have a “drag the gui control” playground in my bookmarks toybox.

https://www.babylonjs-playground.com/#XCPP9Y#134

It is using .top and .left on the button. (lines 56-57)

In my latest demo, we used adt.uOffset and .vOffset. Let’s try to do a re-wiring…

https://www.babylonjs-playground.com/#14MFVB#8

In line 6, I DIDN’T attach the camera to the canvas.

In line 31, I elevated ground2 slightly higher-than primary ground.

In line 100-132, I pasted a bunch of code from that GUI-drag playground mentioned earlier.

I nopped lines 121/122, and added lines 123/124.

And lastly, some simple adjustments in line 129… using adt.rootContainer in place of panel.

And, it works. Interesting. I’ll be darned. It only works ONCE, though. We got a bug somewhere. :slight_smile: It’s part of the fun, eh? To make it work multiple times, you need to “pick” in the center of the landscape… no matter where the sim-decal has been previously-dropped.

Can I ask… what surface will you be dragging-upon? Landscape? A simple mesh? A complex mesh? (if it’s ok that I ask).

I don’t really LIKE moving the entire ADT using .uOffset and .vOffset. This means that EACH draggable sim-decal… needs a private for-itself-only ADT layer. We need to find a way to use simDecal.top and .left… and only use ONE ADT for ALL sim-decals. hmm. There HAS TO BE a way.

We need to study dynamicTextures (such as the ADT). Maybe… we can use the mesh’s standard texture… as a background for the ADT… but I think we will lose shadows and other shading power. Not sure.

BIG question: In a single drag… do you want the decal to exit-from ONE mesh (like a ground)… and enter-onto the sides/top of a box/otherMesh (sitting upon ground)… smoothly and seamlessly? If so… we are (I am) “barking up the wrong tree”, I would say. :slight_smile:

Thx, Wingnut.
I found there is a problem that It needs to create double meshes in this method.
so, I working on how to not create double meshes but can move the decal. I found canvas maybe a good solution, but it still has a lot of work to do.