> ## Documentation Index
> Fetch the complete documentation index at: https://docs.summerengine.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Web compatibility look skill for AI agents

> Make a browser game look high-end in the Compatibility renderer (WebGL 2): what works, recipes, speed. A Summer Engine skill for AI agents.

`web-compatibility-look` is a skill from the [Summer skill library](/mcp/skills): 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.

| | |
| - | - |
| Status | Preview: not yet exercised in-engine by the Summer team |
| Domains | Rendering and lighting, 2D art, 3D models |
| Version | `1.0.0` |
| Engine version | `>=4.6` |
| Recommended set | Yes, installed by `--recommended` |

## 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:

```bash theme={null}
npx -y summer-engine@latest skills install web-compatibility-look --agent claude-code
```

Swap `claude-code` for your agent, such as `codex` or `cursor`. See [Skills](/mcp/skills#quick-start) 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:

```
summer_project_setting(key="rendering/renderer/rendering_method", value="gl_compatibility")
summer_project_setting(key="rendering/renderer/rendering_method.mobile", value="gl_compatibility")
```

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

| Rely on (works in Compatibility) | Avoid (Forward+ only, or ignored) |
| - | - |
| Unshaded and lit StandardMaterial3D, vertex colours, emission | SDFGI, VoxelGI, SSAO, SSIL, SSR |
| WorldEnvironment: background colour or sky, ambient light, tonemapping, depth fog | Volumetric fog, FogVolume |
| DirectionalLight3D with shadows, a few Omni/Spot lights | Dozens of shadowed real-time lights |
| CanvasItem shaders, 2D lights (PointLight2D, DirectionalLight2D), CanvasModulate | GPUParticles with compute-heavy setups (use CPUParticles2D/3D) |
| CPUParticles2D / CPUParticles3D | Native plugins, threads |
| Screen-reading canvas shaders (`hint_screen_texture`) for full-screen post effects | Effects you have not seen work in a browser capture |

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.

| In this skill | Command |
| - | - |
| `summer_add_node` | `summer engine add-node` |
| `summer_batch` | `summer engine batch` |
| `summer_get_diagnostics` | `summer engine get-diagnostics` |
| `summer_get_scene_tree` | `summer engine get-scene-tree` |
| `summer_play` | `summer engine play` |
| `summer_project_setting` | `summer engine project-setting` |
| `summer_save_scene` | `summer engine save-scene` |
| `summer_screenshot` | `summer engine screenshot` |
| `summer_set_prop` | `summer engine set-prop` |
| `summer_set_resource_property` | `summer engine set-resource-property` |
| `summer_stop` | `summer engine stop` |

## Related skills

* [`3d-lighting`](/skills/3d-lighting): Light a 3D scene: sun, omni and spot lights, WorldEnvironment, sky, shadows and ambient.
* [`art-direction`](/skills/art-direction): Define the game's visual style (palette, mood, lighting, post) as an art bible in .summer/art-bible.md.
* [`tune-performance`](/skills/tune-performance): Profile a slow game, find rendering, physics or script hotspots, and propose fixes with expected gains.
* [`ui-basics`](/skills/ui-basics): Build UI: HUDs, menus, health bars, dialogue boxes, Control trees, anchors, containers and themes.
* [`compatibility-renderer-traps`](/skills/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`](https://github.com/SummerEngine/summer/blob/main/library/skills/web-compatibility-look/SKILL.md), rendered from `summer-engine@4.3.0` on npm.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.