Haré todo lo posible para explicar esto lo mejor que pueda:
He programado una instalación de arte (animación interactiva con three.js), funciona muy bien en mi computadora portátil, pero no en máquinas más antiguas y casi en ningún dispositivo móvil. ¿Hay alguna forma de ejecutar la animación javascript en una máquina/servidor de alto rendimiento pero mostrarla/renderizarla en un sitio web, por lo que también se ejecuta en dispositivos que no funcionan? Estaba pensando en algo como hecho para CloudGaming (como en shadow.tech) o servicios como parsec.app tal vez...
¿Alguna idea/sugerencia?
He pensado en el mismo concepto antes también. La respuesta a su pregunta al representar los tres js en el servidor y mostrarlos en una máquina más antigua será algo como esto:
Vas a tener que renderizar tres js en un servidor y luego, básicamente, transmitirlo en vivo al cliente, luego capturar los controles del cliente y enviarlo de vuelta al servidor para aplicarlos, pero la latencia será un dolor de cabeza, así que mejor escribe tu código agradable y ordenado y una gran cantidad de manejo de errores. Ahora que lo pienso, Google Stadia también piensa lo mismo cuando juegas en YouTube.
Arquitectura del servidor
Entonces, pensando aproximadamente en ello, construiría mi motor de procesamiento de esta manera:
Primero cree una habitación con múltiples instancias de su código de tres js. => esto básicamente significa crear múltiples (es decir, index.js, index1.js, index2.js, etc...) Luego, ahora decida si desea hacer esto con el método Straight Forward Recorded and Stream o capturar la transmisión directamente desde el lienzo luego transmitirlo.
Método grabado y de transmisión
Esto significa que crea la sala js, luego la renderiza y la muestra en la máquina del servidor, luego captura lo que se muestra en su pantalla usando algo como OBS studio y luego lo transmite al cliente. No recomiendo este método.
O
método captureStream()
Después de crear su habitación en su servidor, ejecute el código de tres js y luego acceda al lienzo en el que está representando el código de tres js de esta manera:
var canvas = document.querySelector('canvas'); var video = document.querySelector('video'); // Optional frames per second argument. var stream = canvas.captureStream(60); // Set the source of the <video> element to be the stream from the <canvas>. video.srcObject = stream;Luego use algo como webrtc y transmítalo al cliente.
Este es un sitio de ejemplo que puede consultar:https://webrtc.github.io/samples/src/content/capture/canvas-pc/
Honestamente, no abandones la idea de la interacción con el cliente. En su lugar, escriba un código para detectar la latencia de antemano y luego decida habilitarlo para ese cliente específico
Espero que esto ayude