Bug: TilingSprite does throw error when rendering in Node.js

[coeing]

Current Behavior

I am doing successful backend rendering now thanks to the new @pixi/node package 👍

Unfortunately the @pixi/sprite-tiling package does not seem to play well with the gl package because it uses an incompatible shader.

I get the following error when trying to render a TilingSprite object:

ERROR: 0:27: 'texture2DLodEXT' : no matching overloaded function found 
ERROR: 0:26: ':' :  wrong operand types  no operation ':' exists that takes a left-hand operand of type 'lowp 4-component vector of float' and a right operand of type 'const float' (or there is no acceptable conversion)
ERROR: 0:25: '=' :  cannot convert from 'const float' to 'lowp 4-component vector of float'

click to view full shader code
  0: #version 100
  1: #ifdef GL_EXT_shader_texture_lod
  2:     #extension GL_EXT_shader_texture_lod : enable
  3: #endif
  4: #define SHADER_NAME Tiling-Sprite-100
  5:
  6: precision lowp float;
  7:
  8: varying vec2 vTextureCoord;
  9:
  10: uniform sampler2D uSampler;
  11: uniform vec4 uColor;
  12: uniform mat3 uMapCoord;
  13: uniform vec4 uClampFrame;
  14: uniform vec2 uClampOffset;
  15:
  16: void main(void)
  17: {
  18:     vec2 coord = vTextureCoord + ceil(uClampOffset - vTextureCoord);
  19:     coord = (uMapCoord * vec3(coord, 1.0)).xy;
  20:     vec2 unclamped = coord;
  21:     coord = clamp(coord, uClampFrame.xy, uClampFrame.zw);
  22:
  23:     #ifdef GL_EXT_shader_texture_lod
  24:         vec4 texSample = unclamped == coord
  25:             ? texture2D(uSampler, coord)
  26:             : texture2DLodEXT(uSampler, coord, 0);
  27:     #else
  28:         vec4 texSample = texture2D(uSampler, coord);
  29:     #endif
  30:
  31:     gl_FragColor = texSample * uColor;
  32: }
PixiJS Error: Could not initialize shader.
PixiJS Warning: gl.getProgramInfoLog()  ���M
PIXI Geometry attribute 'aVertexPosition' size cannot be determined (likely the bound shader does not have the attribute)
PIXI Geometry attribute 'aTextureCoord' size cannot be determined (likely the bound shader does not have the attribute)

Expected Behavior

It would be great if we could use as much functionality of Pixi.js in the backend rendering as possible. This includes a TilingSprite :)

Steps to Reproduce

• Create a Pixi.js application in Node.js
• Add a TilingSprite objet to the stage
• Try to render the application

Environment

• pixi.js version: 7.3.3
• Browser & Version: Node.js 20.10
• OS & Version: Windows 11

Possible Solution

Just my five cents: I guess it should be possible to change the used custom shader a bit to make it work in Node.js

Additional Information

No response

[bigtimebuddy]

As as workaround, you probably can set the Shader like this:

renderer.tilingSprite.shader = Shader.from(vert, frag, { globals: renderer.globalUniforms } );

For reference, see: https://github.com/pixijs/pixijs/blob/2f2c481e6c693bd76dbc9f50ed89fbf34beff240/packages/sprite-tiling/src/TilingSpriteRenderer.ts#L65-L74

FYI, there are fwo shaders for TilingSprite simpleShader and shader.

Let us know if you come up with a solution. Happy to add it to @pixi/node

[coeing]

@bigtimebuddy Ah, nice, did not think about overwriting the shader myself :) Will try to solve the issue and post the solution here if I find something.