Render differences headless-gl and browser

Questions
1

Hi,

I’m trying out headless-gl to render a simple scene, but I get differences between the rendered image in the browser and in headless-gl. It’s important to me that these images are at least very similar.

The size of the differences are multiple pixels wide so, I think, this is not caused by anti-aliasing.

When using headless-gl, I do get the following messages:
THREE.WebGLRenderer 104
THREE.WebGLRenderer: WEBGL_depth_texture extension not supported.
THREE.WebGLRenderer: OES_texture_half_float extension not supported.
THREE.WebGLRenderer: OES_texture_half_float_linear extension not supported.
THREE.WebGLRenderer: OES_standard_derivatives extension not supported.
THREE.WebGLRenderer: OES_texture_float_linear extension not supported.

Could these unsupported extensions have something to do with the differences?

Or do you have some other idea on what it could be?

The scene is just some triangles using MeshBasicMaterial.

Many thanks,
Karel

2

These WebGL extensions are not used in simple demos like webgl_geometry_cube.

Can you please share a pair of images that demonstrates the difference? Missing anti-aliasing might be a cause of the difference.

3

I think it has nothing to do with headless-gl.

I’m generating the geometry from an SVG and there is a bug in the DOMParser I use in Node.js.

4

It would be nice to see the differences instead of imagining them :slight_smile:

5

I’m sure you can imagine more interesting differences :slight_smile: It was just a line looking wider in the browser than when rendered in node.

Turns out the problem had nothing to do with Three.js or headless-gl vs webgl, but it was a problem when generating the geometry from an SVG file. jsdom.DOMParser is not exactly the same as the browsers DOMParser

2 Likes