Seeking Advice: Integrating Fabric.js and Three.js for Dynamic Texture Updates

Discussion
,
1

Hello I used AI to write for my English skills are very low thank you for understanding.

Overview:
I’m working on a project where I use two Fabric.js canvases and a Three.js renderer. Here’s how it works:

"“Three JS uses webglrenderer and dracoloader to load the compressed gltf model. The scene has only one object which is the model and has 2 lightings”

  1. Canvas 1: This canvas handles user design and contains objects with unique IDs.
  2. Canvas 2: Hidden canvas where a texture image is dynamically updated. It has a fixed dimension of 2048x2048 and contains objects at specific positions with matching IDs from Canvas 1.

Process:

  • A user selects a part and designs it in Canvas 1.
  • Upon completion, Canvas 1 converts its content to a Data URL (toDataURL) and updates Canvas 2. The new image replaces the object with the same ID in Canvas 2.
  • Canvas 2’s updated content is then converted to a Data URL and used as a new texture for a 3D model rendered in Three.js.

Challenges:

  • Performance on Mobile: Canvas 1 occasionally encounters errors or becomes unresponsive on mobile devices, affecting user interaction.
  • WebGL Context Loss: The Three.js renderer occasionally loses its WebGL context, especially after intensive texture updates from Canvas 2.

Goals:

  • Improve performance and stability on mobile devices.
  • Enhance WebGL context management to minimize losses during texture updates.

Questions for Discussion:

  1. How can I optimize Canvas 1’s performance on mobile devices without compromising texture clarity?
  2. What strategies can I implement to mitigate WebGL context loss in Three.js when updating textures from Canvas 2?
  3. Any recommendations for efficiently managing memory and resources between Fabric.js and Three.js in this workflow?