# Hoops Communicator, Multiple Views and Real-time Animation

**URL:** <https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706>\
**Category:** HOOPS Visualize Web\
**Created:** [March 9, 2023, 5:47am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706 "2023-03-09T05:47:05Z")\
**Posts on this page:** 10\
**Page:** 1

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [March 9, 2023, 5:47am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/1 "2023-03-09T05:47:05Z")

</div>

I am using multiple views (each has its own viewer), and animating objects within those views in sync (motion in each view is the same). For each animation frame, I have to update each of the viewers with the same change (setting node transforms, replacing meshes etc). This means that as the number of views increases, the amount of time to push the changes to all the views also scales linearly. This slows down the simulation significantly. Anyway to share the model between the views and only make the changes to this shared model?

---

<div class="post-metadata">

**Author:** ![guido](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/guido/32/115_2.png) [@guido](https://forum.techsoft3d.com/u/guido)\
**Post date:** [March 9, 2023, 1:31pm UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/2 "2023-03-09T13:31:44Z")

</div>

Unfortunately, it is currently not possible to share a model between different HOOPS Communicator webviewer instances, though that is a feature that is currently under consideration as far as I know.

In the absence of this feature my suggestion would be to sample the animations and perform the update (e.g. setting the matrices) at a lower frequency when there are multiple windows and performance is an issue.

---

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [March 14, 2023, 3:58am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/3 "2023-03-14T03:58:37Z")

</div>

Hey Guido … from a performance issue perspective … I think the solution for having multiple views would be to take the OffscreenCanvas + Web Worker route. This way, one can run each instance of the WebViewer in its own Web Worker thread.

[Cranking Up Performance in Graphics Intensive Web Apps and Games (Google I/O '17) - YouTube](https://www.youtube.com/watch?v=wkDd-x0EkFU) - Useful presentation of OffscreenCanvas from Google IO

When running on its own exclusive worker thread, the performance is supposed to be closer to native.

Here is a three.js article on this

[https://threejs.org/manual/?q=offscreencanvas#en/offscreencanvas](https://threejs.org/manual/?q=offscreencanvas#en/offscreencanvas)

---

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [March 14, 2023, 4:02am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/4 "2023-03-14T04:02:14Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/54fbf70a856973ee2d200917f1f433806c15d03e.png)

poking around in the hoos\_web\_viewer.js and engine-wasm.js files … it was pretty easy for me to get HC to work inside of a Web Worker. But I could only get to the point where the Axes and View Cube on an empty model were shown. I am encountering some errors related to master model key etc when I try to load a model. My changes are not yet sufficient to address all the issues.

---

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [March 14, 2023, 4:05am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/5 "2023-03-14T04:05:16Z")

</div>

I am positive that if I had access to the actual non-minified code, things could be much easier. DOM access is baked into HC all the way to engine-wasm.js … and these need to be rearrange to work with the OffscreenCanvas object.

This could be a great addition to the capabilities of HC. I am hoping I can get some help from TS3D experts on this.

---

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [March 14, 2023, 4:47am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/6 "2023-03-14T04:47:18Z")

</div>

![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/1X/e845712b81adb94b2a4dc5ab069a2a4b4ba3b0e8.png)

I have HC rendering on a Web Worker thread using OffscreenCanvas successfully. To get the basic thing working … it took me 2 days of minified code. I sincerely wish TS3D would make it a legitimate feature that is supported out of the box.

Still some work to port mouse events to the worker thread etc.

---

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [March 14, 2023, 10:06am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/7 "2023-03-14T10:06:55Z")

</div>

Three.js has a very well explained article on how to make it work with OffscreenCanvas.

[https://threejs.org/manual/#en/offscreencanvas](https://threejs.org/manual/#en/offscreencanvas)

Lot of the steps hold for HC as well. But it is a bit unfortunate that Three.js is ahead on this compared to a paid/licensed tool like Hoops Communicator.

---

<div class="post-metadata">

**Author:** ![qiul](https://avatars.discourse-cdn.com/v4/letter/q/ecc23a/32.png) [@qiul](https://forum.techsoft3d.com/u/qiul)\
**Post date:** [March 17, 2023, 7:45am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/8 "2023-03-17T07:45:34Z")

</div>

The off screen rendering feature demonstrated by Three. js is a fundamental capability. My guess is that because HC is based on the feature of streaming asynchronous loading, it brings ultra-high rendering performance to HC, but it also makes handling interactive operations in Web Worker particularly complex.

---

<div class="post-metadata">

**Author:** ![guido](https://sea2.discourse-cdn.com/flex020/user_avatar/forum.techsoft3d.com/guido/32/115_2.png) [@guido](https://forum.techsoft3d.com/u/guido)\
**Post date:** [March 17, 2023, 11:51am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/9 "2023-03-17T11:51:58Z")

</div>

It is indeed true, that we have a much more complex feature set than three.js, with our built-in support for streaming, incremental updates, server-side rendering but also more complex operators that are leveraging SVG and the DOM in general more heavily. Not to mention that the core of the engine is written in C++ and uses WebAssembly. It would certainly require quite a bit of work, to fully support offscreen rendering in HOOPS Communicator (and my understanding is that even in three.js, enabling this mode is just experimental).

Having said that, we are looking at offscreen rendering, in particular in the context of better supporting multiple views of the same model on a page (which is the primary use-case here) so keep an eye on our roadmap in this regard.

---

<div class="post-metadata">

**Author:** ![simscapemultibody](https://avatars.discourse-cdn.com/v4/letter/s/b487fb/32.png) [@simscapemultibody](https://forum.techsoft3d.com/u/simscapemultibody)\
**Post date:** [June 16, 2023, 4:07am UTC](https://forum.techsoft3d.com/t/hoops-communicator-multiple-views-and-real-time-animation/1706/10 "2023-06-16T04:07:52Z")

</div>

Managed to complete my implementation of multiple views with each view running on a separate Web Worker thread. Had to port DOM events from main thread to the workers for all the mouse interactivity.

 ![image](https://us1.discourse-cdn.com/flex020/uploads/techsoft3d/original/2X/f/fb0c37fd42e6f7a6180dd10640f2ff5b6b1c660a.jpeg)
