Why is threejs not working on docker?

There is this “node-canvas-webgl” project that allows you to render Three.js on server side.

With the following step, you can get a sample GIF with a box rotating.

  1. git clone https://github.com/akira-cn/node-canvas-webgl.git

  2. npm i

  3. node test/three.js

then you get this beautiful rotating box.

sampleGif

However, with this setup on a docker, I get an error message at

const renderer = new THREE.WebGLRenderer({
  canvas,
});

saying

THREE.WebGLRenderer: Cannot read properties of null (reading 'getUniformLocation')
/usr/src/app/node_modules/three/build/three.js:18302
			throw error;
			^

TypeError: Cannot read properties of null (reading 'getUniformLocation')
    at NodeCanvasElement.getContext (/usr/src/app/lib/canvas.js:88:39)
    at getContext (/usr/src/app/node_modules/three/build/three.js:18248:27)
    at new WebGLRenderer (/usr/src/app/node_modules/three/build/three.js:18279:11)
    at Object.<anonymous> (/usr/src/app/test/threejs.js:14:18)
    at Module._compile (node:internal/modules/cjs/loader:1155:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1209:10)
    at Module.load (node:internal/modules/cjs/loader:1033:32)
    at Function.Module._load (node:internal/modules/cjs/loader:868:12)
    at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:81:12)
    at node:internal/main/run_main_module:22:47

The project works fine even on EC2, but not on docker. Does anyone know what is going on?

Thanks! Happy Coding!

It looks like the project uses headless-gl.
You need to research why headless-gl is not working in your docker container.

Yeah, I doubt this is related to three.js. Looks like a gneneral WebGL issue.