Skip to main content
web-compatibility-look is a skill from the Summer skill library: a guide your AI agent reads when the task matches, so it builds the good version on the first try. Make a browser game look high-end in the Compatibility renderer (WebGL 2): what works, recipes, speed.

​
When your agent uses it

  • The game plays in the browser or is exported for the web and must look finished
  • The look is flat, grey or default in the web preview, or a Forward+ feature does nothing there
  • Choosing lighting, fog, glow, shaders or post effects for a web or Compatibility project

​
Install

summer setup installs every skill for your agent. To add only this one:
Swap claude-code for your agent, such as codex or cursor. See Skills for every option.

​
The skill

Browser play and web exports run only the Compatibility renderer (OpenGL 3 / WebGL 2). Forward+ and Mobile are not available on the web, so a project that plays in the browser must keep:
Never switch it to forward_plus or mobile for a web game. Features that only exist in Forward+ are ignored or break in Compatibility, so a scene can look fine in a desktop preview and flat or broken in the browser. Design for Compatibility from the start; it can still look premium.

​
What to rely on, and what to avoid

Glow and some environment adjustments depend on the engine version. If you use them, take a screenshot in the web preview and check that they really show. Never assume a setting worked because the property exists.

​
2D: a finished look

  1. Palette first. Pick 5 to 7 colours (a dark, a mid, a light, one accent, one danger) and use only those. The player is the brightest, most saturated thing on screen.
  2. Background with depth. A GradientTexture2D sky behind two or three Parallax2D layers of simple shapes, each layer lighter and less saturated the further away it is. Nothing is ever a flat default grey.
  3. Shapes that read. Polygon2D or _draw() per object, with a darker outline (2 to 4 px) and two-tone shading (a lighter top half). Characters get eyes or a face.
  4. Light and mood. CanvasModulate tints the world (dusk, night, cave), and PointLight2D with a soft gradient texture makes lamps, pickups and the player glow.
  5. Post effect, optional. One full-screen ColorRect on a top CanvasLayer with a canvas_item shader that reads the screen texture: a soft vignette and a slight colour grade. Keep it under a few texture reads.
  6. Hit flash and juice. A tiny canvas_item shader (uniform float flash; COLOR.rgb = mix(COLOR.rgb, vec3(1.0), flash);) tweened on hits, plus particles and a small camera shake.

​
3D: a finished look

  1. Flat-shaded or stylised materials. StandardMaterial3D with palette albedo, roughness 1, no metallic. For a toon look use diffuse_mode = DIFFUSE_TOON and specular_mode = SPECULAR_TOON, or a small spatial shader with banded lighting.
  2. One sun, real shadows. One DirectionalLight3D (shadows on, a warm colour) plus an ambient light from the WorldEnvironment in the cool palette colour, so shadows are tinted, not black.
  3. Depth fog in a palette colour. Fog that matches the sky colour hides the far edge and gives scale.
  4. Bake what you can. Static props can carry vertex-colour ambient occlusion or a hand-painted gradient, which costs nothing at runtime.
  5. Emission for accents. Pickups, eyes, lamps and the goal get emissive materials in the accent colour.
  6. Readable silhouettes. Keep the camera far enough back, use a slightly saturated rim colour on the player (a fresnel term in a spatial shader), and avoid noisy textures.

​
Performance on the web

  • Aim for 60 fps on a mid laptop browser: fewer than about 200 visible meshes, shadows on one light only, CPU particles under about 300 alive.
  • Reuse nodes (pools) instead of instancing every frame, and never allocate in _process.
  • Keep textures small (1024 px or less) and power-of-two where you can.

​
Verify

Run the game, take one screenshot in the web preview, and compare it to the palette and the look. A grey, blank or default-looking capture means the look is not there yet, or a Forward+-only feature was used: fix it before moving on.

​
From a shell

No Summer MCP tools in this session? Run each one as a command; when summer --version is missing or below 4.0, use npx -y summer-engine@latest in place of summer. Fields are flags in kebab-case (--scene-path res://main.tscn) or one --input '<json>', and summer ops describe <op> prints the exact input. The summer-cli skill has the rest.
  • 3d-lighting: Light a 3D scene: sun, omni and spot lights, WorldEnvironment, sky, shadows and ambient.
  • art-direction: Define the game’s visual style (palette, mood, lighting, post) as an art bible in .summer/art-bible.md.
  • tune-performance: Profile a slow game, find rendering, physics or script hotspots, and propose fixes with expected gains.
  • ui-basics: Build UI: HUDs, menus, health bars, dialogue boxes, Control trees, anchors, containers and themes.
  • compatibility-renderer-traps: Make a Forward+ game look right on the Compatibility renderer: instance uniforms, MultiMesh, vertex colors.
Source: library/skills/web-compatibility-look/SKILL.md, rendered from summer-engine@4.3.0 on npm.