Improve Street controls 1 #1017

gliegard · 2019-01-29T13:50:26Z

Description

improve StreetControls : add click and go, surface helpers, click and look at, tweens animations :

Mouse click on ground detection, and associated callback, that go to the clicked position
Mouse click on other object (not ground), and associated callback, that makes camera look at the position
Surfaces as helpers for the end user :
- Circle displayed when user moves the mouse on the ground
- Rectangle displayed when user moves the mouse on other objects (like walls of a building)
Tweens animations :
- camera can move to another position smoothly
- camera can look at a position smoothly in an animation

Motivation and Context

User should have a good experience using immersive example

Screenshots (if appropriate)

gchoqueux

Nice improvement

src/Core/TileMesh.js

src/Controls/StreetControls.js

zarov

Could you add an explanation in the message of your fix commit ?

Anyway, very happy to see something like this, though it needs a bit more work. Thanks a lot !

src/Controls/StreetControls.js

zarov · 2019-01-29T14:16:10Z

src/Controls/StreetControls.js

+        // Raycaster used to pick objects
+        this.raycaster = new THREE.Raycaster();
+        // Tween is used to make smooth animations
+        this.tweenGroup = new TWEEN.Group();


Declare this.tweens (which should be this.tween) here. Side note: why do you need a group and a tween ? (I know nothing about this library)

ok. side answer: First I try without a Group but I didn't manage to make it work.

Ok, I'll also take a look at it to see if we can make it work

zarov · 2019-01-29T14:19:17Z

src/Controls/StreetControls.js

+        // basic threeJs pick with raycaster
+        const normalized = this.view.viewToNormalizedCoords(event);
+        this.raycaster.setFromCamera(normalized.clone(), this.camera);
+        const intersects = this.raycaster.intersectObjects(this.view.scene.children, true);


This will be very very heavy if you are inside a building with a complex mesh: we need a better solution. Now, I'm not going to block this PR for this, but I would appreciate if you already have some insights on how to fix this.

Anyway, please add a warning concerning this problem for now.

Finally, I use existing picking method, and pick on specific layers !!

src/Controls/StreetControls.js

src/Core/TileMesh.js

src/Controls/StreetControls.js

zarov · 2019-01-31T09:26:19Z

src/Controls/StreetControls.js

+        this.start = this.camera.clone();
+        this.end = this.camera.clone();
+        this.end.lookAt(position);
+        const factor = { t: 0 };


Sorry, I meant that you could directly write new TWEEN.Tween({ t: 0 }, this.tweenGroup) below.

zarov · 2019-01-31T09:27:15Z

src/Controls/StreetControls.js

+        // Raycaster used to pick objects
+        this.raycaster = new THREE.Raycaster();
+        // Tween is used to make smooth animations
+        this.tweenGroup = new TWEEN.Group();


Ok, I'll also take a look at it to see if we can make it work

examples/immersive_paris.html

src/Controls/StreetControls.js

gchoqueux · 2019-02-20T12:34:55Z

src/Controls/StreetControls.js

+        this.view.removeFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester);
+    }
+
+    stopTweensAnimations() {


could you rename in stopAnimation? the user doesn't know it's tween.
could add this.view.removeFrameRequester(MAIN_LOOP_EVENTS.BEFORE_RENDER, this.animationFrameRequester); in stopTweensAnimations?

or merge onComplete and stopTweensAnimations...

yes, I've renamed to stopAnimation. And I 've remove onComplete because it's not need to be exposed.

this.view.removeFrameRequester isn't removed in all cases

yes, thanks, updated

src/Controls/StreetControls.js

zarov

Overall it seems the quality downgraded. When i click on the street to move, it takes one second to start, and then it is not smooth at all.

zarov · 2019-02-21T08:55:30Z

src/Controls/StreetControls.js

+        }
+    }
+
+    onMouseMove(event) {


I have an error when moving the mouse before the layer is ready. Could you add a condition like if (!layer.ready) ? Or something that fixes the error.

Yes, thanks, I 've added a bugfix in View

…ok at, tweens animations : - Mouse click on ground detection, and associated callback, that go to the clicked position - Mouse click on other object (not ground), and associated callback, that makes camera look at the position - Surfaces as helpers for the end user : - Circle displayed when user moves the mouse on the ground - Rectangle displayed when user moves the mouse on other objects (like walls of a building) - Tweens animations : - camera can move to another position smoothly - camera can look at a position smoothly in an animation

…r not ready. Before this commit, picking on a layer, that was not yet ready, thrown an exception.

To see an example, look at immersive_paris.html example, you can change building layer transparency in the debug UI.

…out doing an instanceof

Before this commit, orientedImageCamera, has a default far set to 1000, A side effect is that OrientedImageMaterial was only able to project texture to a distance of 1000, because OrientedImageMaterial uses OrientedImageCamera to project textures. Now, OrientedImageCamera default far set to 10 000, so OrientedImageMaterial projects texture to 10 km distance.

…gs' layer to 'Buildings', and increase background radius from 80 to 1 200

gchoqueux

thanks

gchoqueux requested changes Jan 29, 2019

View reviewed changes

zarov suggested changes Jan 29, 2019

View reviewed changes

gliegard force-pushed the improve_street_controls_1 branch from 29073df to d905c71 Compare January 30, 2019 13:33

gliegard added the wip 🚧 Still being worked on label Jan 30, 2019

zarov reviewed Jan 31, 2019

View reviewed changes

gchoqueux added enhancement 🚀 feature 🍏 Adds a new feature labels Feb 1, 2019

gchoqueux added this to the 2.8.0 milestone Feb 1, 2019

gliegard force-pushed the improve_street_controls_1 branch from 422fded to 3e37235 Compare February 1, 2019 16:29

gliegard force-pushed the improve_street_controls_1 branch 2 times, most recently from 1767609 to 3845dab Compare February 19, 2019 14:56

gliegard removed the wip 🚧 Still being worked on label Feb 19, 2019

gchoqueux reviewed Feb 20, 2019

View reviewed changes

zarov reviewed Feb 21, 2019

View reviewed changes

zarov approved these changes Feb 21, 2019

View reviewed changes

gliegard force-pushed the improve_street_controls_1 branch from 277f54d to c51b59e Compare February 21, 2019 10:45

gliegard added the ready label Feb 21, 2019

gliegard added 6 commits February 21, 2019 15:25

fix(view): picking: Add a log warning when user try to pick on a laye…

f47a23e

…r not ready. Before this commit, picking on a layer, that was not yet ready, thrown an exception.

fix(OrientedImageMaterial): it supports opacity.

3b70163

To see an example, look at immersive_paris.html example, you can change building layer transparency in the debug UI.

feat(TileMesh): add a boolean to know if it's a TileMesh or not, with…

3e29ab1

…out doing an instanceof

example(immersive): add debug UI, and change the name of 'WFS buildin…

513ad4a

…gs' layer to 'Buildings', and increase background radius from 80 to 1 200

gliegard force-pushed the improve_street_controls_1 branch from 4f46db4 to 513ad4a Compare February 21, 2019 14:26

gchoqueux approved these changes Feb 22, 2019

View reviewed changes

gchoqueux merged commit 89fef54 into iTowns:master Feb 22, 2019

gliegard deleted the improve_street_controls_1 branch March 29, 2019 10:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Improve Street controls 1 #1017

Improve Street controls 1 #1017

gliegard commented Jan 29, 2019

gchoqueux left a comment

zarov left a comment

zarov Jan 29, 2019

gliegard Jan 30, 2019

zarov Jan 31, 2019

zarov Jan 29, 2019

gliegard Feb 19, 2019

zarov Jan 31, 2019

zarov Jan 31, 2019

gchoqueux Feb 20, 2019

gliegard Feb 20, 2019

gchoqueux Feb 21, 2019 •

edited

Loading

gliegard Feb 21, 2019

zarov left a comment

zarov Feb 21, 2019

gliegard Feb 21, 2019

gchoqueux left a comment

Improve Street controls 1 #1017

Improve Street controls 1 #1017

Conversation

gliegard commented Jan 29, 2019

Description

Motivation and Context

Screenshots (if appropriate)

gchoqueux left a comment

Choose a reason for hiding this comment

zarov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gchoqueux Feb 21, 2019 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

zarov left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gchoqueux left a comment

Choose a reason for hiding this comment

gchoqueux Feb 21, 2019 •

edited

Loading