search

freshfork / p5.EasyCam

A p5.js library for easy 3D camera control.
https://freshfork.github.io/p5.EasyCam
MIT License
137 stars 33 forks source link

multiple canvases #5

Closed jjeffregeiringer closed 3 years ago

jjeffregeiringer commented 4 years ago

Hello!

Thank you for this excellent resource! I am trying to implement a webpage that contains 13 separate WEBGL canvases. I have gotten this to work with p5's built-in instancing functionality, and it works splendidly. However, when I realized I definitely needed to get EasyCam instead of using the default OrbitControl, I was surprised and disappointed to see that it doesn't seem to work on anything beside the first canvas that is created in the script. Incredibly, the latest version of OrbitControl actually detects and works on all 13 separately! The only real drawback is that it doesn't seem to have a way to disable its capturing the scrollwheel, the same way EasyCam does. I have a function in my page script that sets up and runs the canvas; EasyCam is where it should be, in the setup. The overall p5 function then gets called 13 times, creating separate WEBGL canvases on the page. As I said, the behavior is that EasyCam works flawlessly on the first canvas but not the other twelve.

Is there any chance this could be fixed soon? Or am I doing something wrong?

cheers, and thanks again!

jwdunn1 commented 4 years ago

I'll look into this. Meanwhile, there are two ways to handle multiple views. See: https://freshfork.github.io/p5.EasyCam/examples/SplitView and https://freshfork.github.io/p5.EasyCam/examples/MultiView and the sources: https://github.com/freshfork/p5.EasyCam/tree/master/examples/SplitView https://github.com/freshfork/p5.EasyCam/tree/master/examples/MultiView

jwdunn1 commented 4 years ago

Here is an exploration of a pair of independent canvases: https://editor.p5js.org/jwdunn1/sketches/Iebo4oS0t The camera works by default in the upper canvas and with a little coercion/override in the lower. The problem now is the rotation control during left and right drag...it seems to be off. As for a chance of fixing this soon: not so much - it will take time to sort out the differences between the instance mode and global mode. Unless someone else can devise a patch, you may have to resort to the mentioned single-canvas split view solutions or seek alternatives. We can leave this issue open until it can be resolved.

jjeffregeiringer commented 4 years ago

Cheers, and many thanks for the quick reply! I will look into all this and follow up here.

rantonse commented 4 years ago

I'll look into this. Meanwhile, there are two ways to handle multiple views.

Hi, and thank you for your work on this! I am also in need of multiple canvases. These two examples work great with version 0.9.0 of of P5, but break with version 1.0.0. Is this known behavior and mentioned somewhere?

jwdunn1 commented 4 years ago

Thanks for pointing this out! Here is a reproduction of the issue with p5 v1.0.0: https://editor.p5js.org/jwdunn1/sketches/r59KF5lJZ The camera works, but it appears that a change was made to the way p5 applies, blends, and/or renders textures. This will require deeper investigation.

jwdunn1 commented 4 years ago

@rantonse Examples have been updated to work with p5.js v1.0.0. BTW, the fix for the multi-canvas examples is to call clear() instead of background().

jwdunn1 commented 3 years ago

Here is a sketch with three canvases on one web page: https://editor.p5js.org/jwdunn1/sketches/QNti-UGsW It demonstrates how to build and offset canvases, each with independent EasyCam instances and should scale to 13 or more. (Note: Issue #10 helped solved this one and provides guidance on accounting for container offsets.)

jwdunn1 commented 3 years ago

The latest update to the p5.EasyCam library automatically handles offset canvases. (The new version is labeled with "v1.2.0" and can be referenced at CDN: https://cdn.jsdelivr.net/gh/freshfork/p5.EasyCam@1.2.0/p5.easycam.js) Examples Single offset canvas: https://editor.p5js.org/jwdunn1/sketches/nSUIS0If0
Multiple in a grid: https://freshfork.github.io/p5.EasyCam/examples/MultiCanvas Expected behavior is that you can click anywhere in a sketch and the scene should not rotate until you drag your mouse. Also works with touch. I'm closing this issue for now. It can be re-opened if necessary.