Graphics Engineer (WebGL / Shaders)

Fourthwall helps online creators like YouTubers, influencers, and podcasters make money by providing customized online shops for merchandise, donations, and memberships. They serve over 500,000 creators worldwide. This role owns the rendering layer used in their product design tool for merchandise creation.

• Experience with image processing concepts including color spaces (RGB, HSL, luma), alpha compositing, convolution filters (blur, Sobel), and distance fields/SDF
• Awareness of GPU performance considerations such as render targets, ping-pong buffers, state change costs, program and texture leaks, and memory budgets
• Practical experience with TypeScript and either Three.js or raw WebGL
• Ability to debug and analyze rendering frames to identify causes of issues

Nice to have:

• Knowledge of PBR, matcap, normal mapping, and screen-space lighting
• Familiarity with algorithms like Jump Flood, Gaussian/separable blur, mipmaps, and anti-aliasing techniques (MSAA vs. FXAA)
• Experience with preview engines such as print, CAD, photo editors, or game VFX
• Understanding of browser constraints like context loss, preserveDrawingBuffer, and WebGL context limits

Shader pipeline and compositing:

• Write and maintain GLSL fragment shaders for print techniques
• Manage a layer stack similar to a graphics editor including product mockup, user artwork, gloss, and overlay
• Perform compositing with premultiplied alpha and clipping to printable regions
• Implement product colorway recolor preserving shadows, folds, and fabric texture

GPU image processing:

• Develop passes that process user artwork before application such as blur, Sobel, normal/bump maps, signed distance fields
• Implement technique effects like engraving relief, die-cut outline, embroidery threads, and gloss on print
• Handle multi-pass algorithms (Jump Flood, distance fields) and interface with final shaders

Performance and GPU resources:

• Manage VRAM budget by reusing render targets and shader programs, caching product instances, and disposing textures
• Balance compositing resolution versus export resolution without quality degradation or memory leaks
• Address WebGL context loss, browser limits, and bulk export at high resolution
• Profile rendering performance including passes per frame and memory allocations

Image quality:

• Ensure edge antialiasing, including use of SDF instead of 1-bit masks
• Maintain consistency between live preview and exported PNG
• Provide snapshot and visual regression coverage for shader changes
• Diagnose and debug rendering issues at frame level

Fully remote work allowed only within Poland / EU.