Multiple Cameras / Split View / Picture in Picture - Quick Tip Tutorial

This topic has 18 replies, 5 voices, and was last updated 3 weeks, 4 days ago by David Duperron.

Viewing 15 posts - 1 through 15 (of 19 total)

1 2 →

Author

Posts
2024-10-24 at 5:42 am #78065

xeon
Customer

Every now and then I run into a forum thread on the subject of multiple views, picture in picture or split view. Luckily for all of us Verge3D has a solution.

Check out the QuickTip Tutorial here:
https://www.xeons3dlab.com/post/multicamera-picture-in-picture-using-verge3d

If there is significant interest I will do a deeper dive tutorial into the details. Project file available as well.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2024-10-24 at 6:48 am #78067

Yuri Kovelenov
Staff

Thanks!

Chief 3D Verger | LinkedIn | Twitter

2024-10-24 at 8:22 am #78069

kdv
Participant

Good job But this is not a multi-camera app. It’s just two independent apps running at the same time in two separate iframes. You’ll have to add some additional logic to synchronize, for example, moving objects and see them moving in both views…

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2024-10-24 at 2:36 pm #78083
David Duperron
Customer
Same remark as kdv.
I just came across another way to get several camera views simultaneously here:
How to use 2 cameras three.js
This would be absolutely great to have in Verge3D!
Anyone would know how to integrate this in a Verge3D app?

Another way would be to use a camera array, as in the following example:
verge3d-code-examples/webgl_camera_array.html

Cheers

David
- This reply was modified 4 weeks ago by David Duperron.
- This reply was modified 4 weeks ago by David Duperron.
2024-10-24 at 3:15 pm #78084

xeon
Customer

In the video there are two sections…one showing this using two different GLTFS and the second part showing this using one GLTF. You can control one view with the other including cameras, hiding objects, animating objects. The logic for synchronization is all up to the requirements of the project. In the second part of the video I show how you can have this synchronization between the two windows with the single GLTF. Perhaps I did a poor job on this QuickTip and the concept did not come across. I will have to consider a more detailed approach in the future.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2024-10-24 at 3:29 pm #78085

David Duperron
Customer

Hi Xeon,
Yes I saw that second section, but for me, even if you load the same GLTF at the beginning, it behave from there as two seperate scenes, and the only way to “synchronize” the two scenes is to send messages from one to the other, to do the same thing in the second one as you just did in the first one… (or do something else as in your example).

2024-10-24 at 3:42 pm #78087

qiangge
Participant

Good job
I’m learning from everyone here! I once tried to create a picture-in-picture effect, inspired by the Mars Rover project, to make a camera monitor effect

Plugin_Monitor

2024-10-24 at 3:45 pm #78088

David Duperron
Customer

Hi @qiangge!
That looks nice!
How did you manage to get this? Would you share some tips or code?? :)

Cheers

David

2024-10-24 at 4:11 pm #78092

qiangge
Participant

Hi @Dvaid
Assign the frame buffer texture rendered by the action camera to a custom shaderMaterial, and then apply this material to the plane used for the UI object. The principle is like this.
Since this is already a commercial plugin, I’m unable to share the specific code. However, I plan to release some useful plugins in the future. hope someone like it

2024-10-24 at 4:19 pm #78093

xeon
Customer

Here is an example that may provide a bit of clarity.

https://cdn.soft8soft.com/AROAJSY2GOEHMOFUVPIOE:f2f27a4091/X3L_MultiCam3/X3L_MultiCam3.html

Drag the yellow cube in either view.

The CallMethod and PostMessage is one way to do this. It may not work for everyone’s particular project needs but I find it extremely useful when needing to display the same object from different angles at the same time.

In the QuickTip I did not go into detail on how you control synchronization of the scenes as I left that creative freedom up to the viewer/developer. I will have to create a separate tutorial on scene synchronization but the above demo will give you and idea that it can be done.

The complexity is the communication between views and insuring you handle variables and data so that it can be communicated easily.

Hope this helps.

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2024-10-24 at 4:47 pm #78094

xeon
Customer

Nicely done!

Xeon
Route 66 Digital
Interactive Solutions - https://www.r66d.com
Tutorials - https://www.xeons3dlab.com

2024-10-24 at 6:56 pm #78097

David Duperron
Customer

Thanks for your answer! Nice workaround indeed…
Is this commercial plugin already available? If so where can I get it?
Regards

David

2024-10-25 at 4:24 am #78100

qiangge
Participant

Hi @ David ! I have sent the plugin to Gumload. For details, please refer to
https://vv4d.gumroad.com/
forum

2024-10-25 at 11:24 pm #78127

kdv
Participant

That’s how а multi-camera (or picture-in-picture) app should work

Puzzles and JS coding. Fast and expensive.

If you don’t see the meaning in something it primarily means that you just don’t see it but not the absence of the meaning at all.

2024-10-26 at 5:10 pm #78130

David Duperron
Customer

Exactly!
How did you manage to get this result? I see that this involves javascript coding, which is not surprising, but what is the option you took?
Using Camera arrays or more probably the method presented in this video?
That’s axactly what I need…
Author

Posts