Implement zoom in zoom out in screenspacecanvas2D

[masterdon]

I have rendered a 2d scene using one of the json data. For this, I have used 2d rectangles to implement the walls of home planner.

http://www.babylonjs-playground.com/#2WHFP1#7

However the zoom in zoom out feature isn't working despite setting arcrotatecam and cameras setposition and target. What am i missing here?

If it doesn't work, I was hoping to implement scaling(as suggested in one of the post by @Wingnut) and re positioning element when user is scrolling in and out.  But not sure whats the best way to re position all the elements though. Any help and suggestion would be great..

 

Thanks.

 

 

[Wingnut]

Hi M.  Yeah, you are using a ScreenSpaceCanvas2D (it is not a mesh, but instead, an extra layer of glass on your monitor - glued there). It ignores camera zooming.

Now, if you used a WorldSpaceCanvas2D... then you could move the camera closer/further from IT... because it has a real mesh.  That real mesh is located in canvas.worldSpaceCanvasNode (I think).

Try the WorldSpaceCanvas2D... see if that works better.  Currently, your camera mousewheel IS working, but there are no scene mesh to zoom-in/out. 

Hope this helps.  Write back, as needed/wanted.

PS: You know about highlighting code-blocks in the playground editor, and using TAB and shifted-TAB (and control-z oops)... to do nice indenting in your playground code, right?  Just checking.  Forum helpers LOVE nice indenting... makes playground code easier to read.    Here's a list of MANY playground editor hotkeys.  Party on!

[masterdon]

Hi @Wingnut: Good to see you back 

 

Here http://www.babylonjs-playground.com/#2WHFP1#10, used WorldSpaceCanvas2D instead of screenspacecanvas2D. Nothing rendered though 

[Wingnut]

http://www.babylonjs-playground.com/#2WHFP1#11

Your camera was aimed weird and worldspace canvas was too big.    I changed its color, too.

[masterdon]

i cant see the rendered layout.....do you?

[Wingnut]

Nope, not yet. I wouldn't want to deny you the FUN of finding-out why.

Besides, I'm not sure why, yet.  I learn at same time as you.

Should probably de-round the corners, check BACKSIDE-of WSC2D canvas, and start playing with origins, X/Y, sizes, etc. 

Goof around, it will start working.  I'm on lunch break... and I'm hungry.  heh

[masterdon]

On it sir  

 

Happy munching

[Wingnut]

http://www.babylonjs-playground.com/#2WHFP1#15

Nothing on the back side.    Having some fun with worldSpaceNode in the lines 44-48. Changed some WS canvas rotation stuff.  Fixed some indenting.  What a guy, huh?  Personalized service... at an honest price. 

[Wingnut]

Uh oh...

http://www.babylonjs-playground.com/#2WHFP1#16

A little play in lines 100 and 101... "origin" down-scaling.  (littler numbers)

Line 100 var should be "startFromBottomPosition", maybe. 

Version 17 is even better.  No camera setTarget or .lockedTarget set, so... control-drag moves camera target.  I LOVE that feature.  Let's ya slew-around on floor plans easily.  That, along-with a good-working  camera.wheelPrecision, camera.inertia, and camera.speed values... you can make it perfect.

[masterdon]

Genius....not sure how many beers i owe you....

 

One last question for the day(its 12.30am in india), making the borders of each rectangles dashed.

 

[Wingnut]

You just need to teach it to others, when they ask about it.  Pass it on. 

You're making really good progress on your project.  I like that you're trying-out multiple methods.  You're a fun inventor to watch... I enjoy it.

You also tried the "real mesh for wall lines" method (no canvas2d).  I think I mentioned that I like the real-mesh floor plan better. 

With these canvas2d rectangles, you can never scale them taller.  With the real mesh floor plan (flat rectangle mesh), you could turn those wall-lines into 3D... by just up-scaling all the Y axes on all the wall "tiles".  With Canvas2d, it will take a much more complicated "convertTo3D()" func. 

[masterdon]

Definitely on my list... any idea on dashed bordering. oh don't tell me the answer, tell me how to proceed. i know there is a fill property to set from GetBrushFromString, not sure how though...hehe

[Wingnut]

hehe, geez, I'm not sure if that is possible.  Gradient fills for rect2d borders... sure.  Dashed fills?  hmm.

I have an idea, though.  Putting Sprite2d with checkerboard texture.... behind solid backgroundColor rect2d, but make sprite a tiny bit bigger than rect2d atop.  *shrug*  maybe. 

[masterdon]

 Make sense...And i started playing around with 2d as borders for 3d meshes started failing from a larger camera viewpoint(@deltakosh helped me a lot there). Will keep rolling with both the approaches.

Cheers..!

[Wingnut]

*nod*.  Yeah, people often use outlineRenderer, edgesRenderer, or highLightLayer... (or even .showBoundingBox = true)... to put 2D borders on mesh.  But none of those do dashed lines, do they?  *nod*.  Interesting point.  I'll keep thinking. 

[masterdon]

Not just dashed lines. it occurred with normal borders as well
http://www.babylonjs-playground.com/#SUXKHY#7

and also with tubes.
http://www.babylonjs-playground.com/#SUXKHY#9

I am curious how wanaplan(https://www.wanaplan.com/try_plan) have implemented their 2D engine. Its super smooth and do not distort at all. also the zoom in zoom out effect they have used is exactly what we implemented in fabric. I have the same goal here. I tried contacting Feldspar earlier for same. Looks like he is busy 

[Wingnut]

Sometimes mesh and any outlines they might have... suffer from z-fighting, as you likely know.  Two mesh precisely overlapping at some point.

http://www.babylonjs-playground.com/#SUXKHY#12

Sorry, I removed one camera, did some weird changes to the other camera, and re-arranged some code.

But here, you can see where the "flicker" is happening.  It happens at all corners, and at the seams between wall tiles.  There are two (or more) mesh overlapping... wherever there is flicker.  During the flicker, the lines disappear occasionally.  There is a good possibility...that if you can eliminate mesh overlap, you will get better borders/outlines.

Wanaplan looks like a context2d canvas.  Essentially, SVG.  Your system is far more advanced... using a context3d canvas.    Wanaplan is surely envious of your system. 

Do they even HAVE a convertTo3D button?  Nah.  You are already kicking their butt up & down the eastern seaboard.  heh.

Does everyone like my lines 97-98, trying to get an overhead view from this arcRotateCam?  Those target/position X and Z values must be a TINY BIT different from each other, or else the camera won't render anything.  Goofy cameras. 

[Wingnut]

For fun, I tried out some various edge-making methods in lines 82-98.  It is currently set for highlightLayer.  Looks strange, but somehow cool.  No borders are seen where any two highlightLayer mesh... connect (between wall tiles).  That is normal - talked about in highlightLayer docs.

Apparently, programmer needs to use TWO highlightLayers and then alternate for each tile in the "wall run" (to view tile seams).  Interesting.  I didn't try that method.  You would need a Boolean flag in your createBox() func... flip-flopping back and forth, targeting highlightLayer1, then highLightLayer2, then back to #1, then back to #2... for each box.  (Did I over-explain enough, there? heh)

This is all kind-of fun, huh?  Blueprint-grade floor plan making, in BJS.  Nice challenge. 

The new Babylon.GUI system might be worth a test, too. That is a context2d-based canvas thing, which makes it super-customizable.  Make your own shapes!  BUT...  when it comes time to convertTo3D()... this system might be THE MOST difficult to do that.

But, you could overload http://doc.babylonjs.com/extensions/guibutton

If you added a button.howTallWhenConvertedTo3d = 15;  Now that button/rectangle is ready to be more-easily converted to 3d, right?  And notice these buttons have a BUILT-IN border feature.  It might be able to do DASHED borders... with a little hacking.  I think Deltakosh RECENTLY finished this system, so it is fresh in his mind.  He MAY be willing to do some customizing... specifically for this project.  Who knows?  I wouldn't ask for the moon and stars, if I were you.  But dashed borders on rectangles/buttons?  A definite possibility.

Notice the LINES class.  Dashed is available!  So, you could change your createBox() func... to make the tiles from 4 dashed lines... or 4 solid lines.  Perhaps find a way to do an easy toggling.  Two base-classes of wallTile... dashedBorder and solidBorder.  Both types of boxes... made entirely of Babylon.gui lines.  Cooooool.  Might work good.  hmm. 

It is an extension, so you might need to load another JS file into your project (same-as for Canvas2D system).