Examples: Jungle Rabbit, a low-poly river endless runner - #1670
Merged
Merged
Conversation
An endless river runner built on the 3D tier. The boat holds station on screen while the course is recycled past it, so the world stays a handful of pooled objects rather than a level that grows. What it showcases, and why it earns its place in the gallery: - InstancedMesh for the bank vegetation and the boulder field — one draw call per prop type, which is what lets the valley be dense rather than suggestive - a rigged, animated glTF (the paddling boat) placed and driven through `GLTFModel`'s own `pos` / `rotate` / `scale` - procedural terrain and water built as vertex-coloured meshes, fading toward the sky through `Camera3d`'s distance fog - ground shadows, transparency sorting and a mesh-hosted `ShaderEffect` for the sun's lens flare, aimed from the sun disc and drawn below the HUD rather than over it - `Text` gradient fills for the title and menu, on a display face Also adds `scripts/backends.mjs`, the three-browser screenshot harness this example was built with. Headless Chromium has no GPU and silently falls back to WebGL 2 on SwiftShader, so it cannot see a WebGPU bug at all; the headed Chrome and WebKit targets are the ones that find them, and they do not always agree with each other. Asset credits go in `LICENSE.md` alongside the other examples. Note the display face is CC BY-NC-SA — the one asset in the gallery that is not free for commercial reuse — so it is called out explicitly there. Co-Authored-By: Claude Opus 5 (1M context) <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01NGvtaUNATVCVxD2qcbiY4t
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The example 20.5 was waiting on. Held out of the tree until 20.5.0 published to npm; that happened today, so it lands now.
An endless river runner on the 3D tier — the boat holds station on screen while the course is recycled past it, so the world stays a handful of pooled objects rather than a level that grows.
What it showcases
GLTFModel's ownpos/rotate/scale— the placement API added in 20.5Camera3ddistance fogShaderEffectfor the sun's lens flare — aimed from the sun disc, and depth-ordered below the HUD rather than drawn over itTextgradient fills for the title and menuAlso included
scripts/backends.mjs, the three-browser screenshot harness this example was built with. Headless Chromium has no GPU and silently falls back to WebGL 2 on SwiftShader, so it cannot see a WebGPU bug at all — the headed Chrome and WebKit targets are the ones that find them, and they do not always agree with each other. That harness is how the Safari glyph-clipping bug was caught.Verified for this PR on headed Chrome (WebGPU, Metal-3) and headed WebKit (WebGPU);
pnpm lintand bothtscgates pass.Asset licensing
Credits added to
packages/examples/LICENSE.mdalongside the other examples. Models are original Blender work (MIT with the rest of the source); music is Pixabay-licensed and credited on the title screen.LICENSE.mdso anyone copying the example sees it, and the upstream licence ships next to the font.🤖 Generated with Claude Code
https://claude.ai/code/session_01NGvtaUNATVCVxD2qcbiY4t