attempting to implement orthographic camera by sirrodgepodge · Pull Request #6 · vasturiano/three-render-objects

sirrodgepodge · 2020-04-29T03:16:14Z

Hello there!

Attempting to implement orthographic camera (for the purpose of 2D Usage of 3d-force graph for performance benefits) using this SO post:
https://stackoverflow.com/questions/48758959/what-is-required-to-convert-threejs-perspective-camera-to-orthographic

I actually was unable to get a test environment working for this (with the different packages working together for some reason NPM link didn't work), I figure you likely have one readily available to take a quick look.

RaulPROP · 2020-04-29T12:43:06Z

To test it locally, i did the following:

Clone 3d-force-graph and your fork in the same folder.
Modify the package.json of 3d-force-graph. Change the three-render-objects dependency to file:<relative-route> (probably file:../three-render-objects).
Run npm i in your fork.
Modify your fork as much as you want.
Run npm run build in your fork folder whenever you want to test changes.
Run npm i in 3d-force-graph, then open one file of the example folder (i usually pick basic) and change the import to the one that is local (<script src="../../dist/3d-force-graph.js"></script>).
Open that file in the browser.

And that's it.

Now, when you want to test some changes you need to run npm run build on the fork and npm i on the 3d-force-graph.

PS: In order for your fork to work, you also need to add cameraType to the stateInit in 3d-force-graph/src/3d-force-graph.js.

sirrodgepodge · 2020-04-29T13:54:07Z

got it, thank you, I figured there had to be something upstream I was missing...

btw you can use npm link in order to avoid needing to modify package.jsons, it overrides a dependency with a local symlink

in the local forked and modified dependency run npm link, this builds and exposes this local code to be symlinked elsewhere.
in your consuming repo npm link <dependency name>, in this case npm link three-render-objects

Here I think why I failed is because as you pointed out I also need to modify the intermediate dependency of 3d-force-graph.

vasturiano · 2020-04-30T08:44:59Z

src/three-render-objects.js


  stateInit: () => ({
    scene: new three.Scene(),
-    camera: new three.PerspectiveCamera(),


The camera declaration should remain in stateInit. Otherwise you may run into situations where you try to use it before it's declared, for example by invoking cameraPosition before initialization.

If you need one of the config options you can always get it as input to stateInit:

stateInit: ({ cameraType }) => ({ camera: /* cameraType logic */ ... })

vasturiano · 2020-04-30T08:51:02Z

src/three-render-objects.js

+
+    if (state._cameraType === 'perspective') {
+      state.camera.aspect = state.width/state.height;
+    } else {


Does all of this code need to be run at initialization? It seems fully duplicated from the component update part so perhaps having it there is sufficient?

vasturiano · 2020-04-30T08:56:19Z

src/three-render-objects.js

    state.renderer.setSize(state.width, state.height);
-    state.camera.aspect = state.width/state.height;
+
+    if (state._cameraType === 'perspective') {


Would it perhaps be cleaner to derive this from the camera object itself, eg:

state.camera.type === 'PerspectiveCamera' ? ...

You would also not need to maintain a spare state._cameraType attribute.

ah, didn't know this was available, will use

vasturiano · 2020-04-30T09:05:53Z

src/three-render-objects.js

+      state.camera.right = width_ortho / 2;
+      state.camera.top = height_ortho / 2;
+      state.camera.bottom = height_ortho / -2;
+      state.camera.near = THREE_JS_PERSPECTIVE_CAMERA_NEAR_DEFAULT;


This appears to be the current default near value of orthographic camera, so maybe there's no need to define it. It can always be overridden upstream.

vasturiano · 2020-04-30T09:07:44Z

Interesting, thanks for the PR @sirrodgepodge! 👍

I left a few minor comments. We should be able to merge this after cleaning up the code a bit.

Would you mind adding something to the docs also?

sirrodgepodge · 2020-05-04T02:07:29Z

Responded to all the comments.

Have to be honest and say that I still couldn't get a test environment working :( :( :(. Maybe you have and can confirm it works.

I need to link three-forcegraph and 3d-force-graph to get react-force-graph-3d to be using this right?

vasturiano · 2020-05-04T06:12:26Z

src/three-render-objects.js

-    camera: new three.PerspectiveCamera(),
-    clock: new three.Clock()
+    clock: new three.Clock(),
+    camera: cameraType === 'perspective' ?


With this logic if the user specifies anything else other than perspective it will fall back to orthographic, which is a little dangerous. Let's swap that so that perspective is the default fallback:

camera: new three[cameraType === 'orthographic' ? 'OrthographicCamera' : 'PerspectiveCamera']();

vasturiano · 2020-05-04T06:15:06Z

src/three-render-objects.js

+
+function updateCamera(camera) {
+  if (camera.type === 'PerspectiveCamera') {
+    state.camera.aspect = state.width / state.height;


You won't be able to access the encapsulated state in a function outside of the kapsule init or update methods.

vasturiano · 2020-05-04T06:20:04Z

@sirrodgepodge for testing this functionality you can run yarn build or yarn dev which will save the built files in the local /dist directory.
Then you can simply import those into your development example. If you want to try with the built-in example, you just have to modify the script tag target here: https://github.com/vasturiano/three-render-objects/blob/master/example/basic/index.html#L7

RaulPROP · 2020-05-04T07:56:13Z

src/three-render-objects.js

+    state.camera.aspect = state.width / state.height;
  } else {
    const aspect = state.width / state.height;
    const height_ortho = depth * 2 * Math.atan(


depth is not defined.

RaulPROP · 2020-05-04T07:56:44Z

src/three-render-objects.js

@@ -375,7 +375,7 @@ const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50;

 function updateCamera(camera) {


You need to pass state if you want to access it.

sirrodgepodge · 2020-05-04T21:05:14Z

whoops, that was super sloppy, apologies, attempted to clean up here:
38305ff

The only thing I'm unclear on is whether state.camera.position.z maps exactly to depth described here:
https://stackoverflow.com/questions/48758959/what-is-required-to-convert-threejs-perspective-camera-to-orthographic

Will give up on fancy npm link and just try getting local orchestration happening through direct imports this weekend.

vasturiano · 2020-05-05T04:43:20Z

src/three-render-objects.js

+
+const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50;
+
+function updateCamera(camera, width, height, depth) {


Small nit, depth could be extracted from camera.position.z eliminating the need for the additional argument.

attempting to implement orthographic camera

9523324

sirrodgepodge mentioned this pull request Apr 29, 2020

Add Full 2D Support vasturiano/three-forcegraph#24

Open

perspective as default

a6e1c26

updating type def

1eaf6f6

vasturiano reviewed Apr 30, 2020

View reviewed changes

sirrodgepodge added 3 commits May 3, 2020 21:53

cleaning up copied and pasted

4d00855

cleaning up

9a0235f

cleaning up

9453b59

vasturiano reviewed May 4, 2020

View reviewed changes

RaulPROP reviewed May 4, 2020

View reviewed changes

cleanup errors, adding depth

38305ff

vasturiano reviewed May 5, 2020

View reviewed changes

		@@ -375,7 +375,7 @@ const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50;

		function updateCamera(camera) {


		const THREE_JS_PERSPECTIVE_CAMERA_FOV_Y_DEFAULT = 50;

		function updateCamera(camera, width, height, depth) {

Conversation

sirrodgepodge commented Apr 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

RaulPROP commented Apr 29, 2020

Uh oh!

sirrodgepodge commented Apr 29, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vasturiano commented Apr 30, 2020

Uh oh!

sirrodgepodge commented May 4, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

vasturiano commented May 4, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

sirrodgepodge commented May 4, 2020

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

sirrodgepodge commented Apr 29, 2020 •

edited

Loading

sirrodgepodge commented Apr 29, 2020 •

edited

Loading

sirrodgepodge commented May 4, 2020 •

edited

Loading