browser-less model rendering using nodejs?

[danpaldev]

I'm trying to get PNG images from my models without using a browser because I want to get pictures of vrm models server-side. However, after a few days of trying this, I haven't achieved much.

I tried using node-canvas-webgl for getting the WebGL stuff:

import { createCanvas } from 'node-canvas-webgl';
//...
  const canvas = createCanvas(width, height);
  const context = canvas.getContext('webgl');

  // Set up renderer
  const renderer = new THREE.WebGLRenderer({ canvas: canvas, context: context });
  //...

And node-three-gltf for getting a node-compatible GLTFLoader.

However, I had no luck to render this. Seems like I'm able to load the model, but after debugging more, I found some errors.

The errors look like these:

THREE.WebGLProgram: Shader Error 1282 - VALIDATE_STATUS false

Program Info Log: 
VERTEX

ERROR: 0:220: 'textureSize' : no matching overloaded function found 
ERROR: 0:220: 'x' :  field selection requires structure or vector on left hand side 
ERROR: 0:220: '=' :  cannot convert from 'const float' to 'highp int'
ERROR: 0:222: '%' : integer modulus operator supported in GLSL ES 3.00 only  
ERROR: 0:224: 'texelFetch' : no matching overloaded function found 

I was wondering if someone knows the way to render a VRM model in a headless or browser-less way.

[manugill]

My recommendation would be to use a headless puppeteer instance (essentially Chrome that's hidden) and take a screenshot of it. You can do this with node on the server-side with minimal issues.

It's certainly going to be a bit heavier/slower than what you're trying above. But it's an extremely significant effort to make a custom webgl or canvas implementation implementation that might support everything that three.js or three-vrm does. It'll likely never match the feature parity of a browser's implementation, and the browser's implementation would actually be much more optimized for rendering 3d too, so speed would likely end up being quite similar in the end to render and take a screenshot even if your above solution did work.