We use cookies to ensure that we give you the best experience on our website. If you continue to use this site we will assume that you are happy with it.

Ok, I Agree

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

Home › Forums › Tutorials › Multiple Cameras / Split View / Picture in Picture – Quick Tip Tutorial

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! :good:

    Chief 3D Verger | LinkedIn | Twitter

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

    Good job :good: 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

    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 :good:
    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… :yes:

  • Author
    Posts
Viewing 15 posts - 1 through 15 (of 19 total)
1 2
  • You must be logged in to reply to this topic.