ThreeJS Shader Guidelines

The new SYQEL Desktop applications now enable users to import custom shaders and style them.

In order for these shaders to be ingested correctly, they need to meet the following standards:

Shader Import Requirements (SYQEL Desktop)

SYQEL imports fragment shader code (single-pass), not full multi-pass projects.

Runtime target

• GLSL ES 1.00 / WebGL1 compatible fragment code.
• Single fragment stage only (no custom vertex shader needed).
• SYQEL injects a fullscreen quad and wrapper uniforms.

Recommended entrypoint

Use this signature for best compatibility:

void mainImage(out vec4 fragColor, in vec2 fragCoord)

SYQEL can also handle void main() and some alternate mainImage(…) signatures, but the above is the safest and preferred format.

Required behavior

• Produce a final pixel color every frame.
• Output color via fragColor (or gl_FragColor if using main()).
• Keep alpha explicit (usually 1.0 unless transparency is intentional).

Available uniforms / inputs

SYQEL provides:

• uniform vec3 iResolution (xy = pixel size)
• uniform float iTime
• uniform int iFrame
• uniform vec4 iMouse (currently zeros)
• varying vec2 vUv (0..1 UV)

Audio-reactive aliases (also available):

• u_time, u_resolution, u_texture
• u_bass, u_mid, u_treble, u_level

Texture channel behavior

• In AI feed with background image:
  • iChannel0 = image
  • iChannel1 = audio FFT texture (1D packed in x)
• In other shader feeds:
  • iChannel0 = audio FFT texture

Compatibility rules

• Do not require multi-pass buffers (Buffer A/B/C/D) or external includes.
• Avoid WebGL2-only syntax/features.
• #version lines are stripped automatically; use WebGL1 style.
• Use texture2D(…) style sampling for maximum compatibility.

Minimal compatible template

void mainImage(out vec4 fragColor, in vec2 fragCoord) { vec2 uv = fragCoord / iResolution.xy; float t = iTime; float a = texture2D(iChannel0, vec2(0.1, 0.5)).r; // audio in most feeds vec3 col = 0.5 + 0.5*cos(t + uv.xyx + vec3(0.0, 2.0, 4.0)); col *= 0.6 + a * 1.4; fragColor = vec4(col, 1.0); }

---

For your convenience you can also provide the following prompt to leading AI models that may be included as the technical guidelines while it creates the custom visual for you:

Use this prompt when asking an AI to generate shader code:

Generate a single-pass GLSL ES 1.00 fragment shader for WebGL1.
Output only shader code (no markdown).
Use entrypoint: void mainImage(out vec4 fragColor, in vec2 fragCoord).
Assume uniforms: iResolution, iTime, iFrame, iMouse, iChannel0, iChannel1, and varying vUv.
Make it audio-reactive using FFT texture sampling (texture2D(iChannel0, vec2(x,0.5)).r or iChannel1 for AI-image mode).
Do not use multi-pass buffers, includes, or WebGL2-only features.
Keep code performant and stable at 60 FPS.