Skip to content

Examples: Add volumetric clouds and atmosphere to webgl_loader_3dtiles#33292

Merged
mrdoob merged 11 commits into
devfrom
3dtiles-clouds
Mar 31, 2026
Merged

Examples: Add volumetric clouds and atmosphere to webgl_loader_3dtiles#33292
mrdoob merged 11 commits into
devfrom
3dtiles-clouds

Conversation

@mrdoob

@mrdoob mrdoob commented Mar 30, 2026

Copy link
Copy Markdown
Owner

Description

Adds volumetric clouds and atmospheric rendering to the 3D tiles example, ported from jeantimex/geospatial.

  • Added @takram/three-atmosphere for sky, aerial perspective, and deferred lighting
  • Added @takram/three-clouds for volumetric clouds with shadow cascades
  • Added postprocessing pipeline (clouds, atmosphere, lens flare, AGX tone mapping, SMAA, dithering)
  • Positioned camera over Tokyo using Geodetic/PointOfView from @takram/three-geospatial
  • Workaround for GlobeControls camera drift by disabling controls until first user interaction
image

/cc @jeantimex @shotamatsuda @gkjohnson

@mrdoob mrdoob added this to the r184 milestone Mar 30, 2026
gkjohnson
gkjohnson reviewed Mar 31, 2026
View reviewed changes

@gkjohnson gkjohnson left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looks great!

Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html
<a href="https://ion.cesium.com/" target="_blank" rel="noopener"><img src="./textures/cesiumion.png" /></a>
</div>

<!-- "three/examples/" import map entry required by 3d-tiles-renderer -->

@gkjohnson gkjohnson Mar 30, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This comment seems misleading - 3d-tiles-renderer does not require all of these import map entries.

@mrdoob mrdoob Mar 31, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

https://github.com/search?q=repo%3ANASA-AMMOS%2F3DTilesRendererJS%20three%2Fexamples%2Fjsm%2Floaders%2FGLTFLoader.js&type=code

👀

@gkjohnson gkjohnson Mar 31, 2026

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh I see what you're saying - I interpreted this comment has saying that all of the below import map entries are requirements of 3d-tiles-renderer. I may change to import from three/addons in the future if this is the recommended path.

@mrdoob mrdoob Mar 31, 2026

Copy link
Copy Markdown
Owner Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I tried to add a comment in the same line but JSON doesn't support comments.

Yeah, using three/addons is more robust.

Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
shotamatsuda
shotamatsuda reviewed Mar 31, 2026
View reviewed changes

@shotamatsuda shotamatsuda left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks @mrdoob and @jeantimex!

Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
Comment thread examples/webgl_loader_3dtiles.html Outdated
mrdoob and others added 2 commits March 31, 2026 11:09
@mrdoob @claude
Examples: Add volumetric clouds and atmosphere to webgl_loader_3dtiles
fcc1d01 
Add atmospheric rendering with @takram/three-atmosphere and volumetric
clouds with @takram/three-clouds, ported from jeantimex/geospatial.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Use renderer.setEffects() in webgl_loader_3dtiles
6516067 
Replace pmndrs EffectComposer with renderer.setEffects() using an
EffectPassAdapter that bridges the two APIs. This removes the need
for EffectComposer, RenderPass, and ToneMappingEffect — tone mapping
is handled by the renderer's built-in AgX.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
mrdoob and others added 8 commits March 31, 2026 12:05
@mrdoob @claude
Examples: Update dependencies and use getObjectFrame in webgl_loader_…
81833b7 
…3dtiles

Update 3d-tiles-renderer to 0.4.23 and @petamoriken/float16 to 3.9.3.
Use Ellipsoid.getObjectFrame() and CAMERA_FRAME from 3d-tiles-renderer
instead of Geodetic/PointOfView from @takram/three-geospatial.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Fix cloud animation in webgl_loader_3dtiles
ee75cfb 
Compute deltaTime in the EffectPassAdapter since WebGLOutput.end()
does not pass it to effects. Share it across all adapters via a
closure variable so cloud velocity animation works correctly.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Simplify 3D texture loading in webgl_loader_3dtiles
4cece56 
Use fire-and-forget fetch pattern for 3D cloud textures, matching
the callback style used for 2D textures. Removes the await/Promise.all
blocking during init.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Fix deprecation warnings in webgl_loader_3dtiles
5ca9f55 
Import CesiumIonAuthPlugin from 3d-tiles-renderer/core/plugins and
other plugins from 3d-tiles-renderer/three/plugins to avoid the
backward-compat wrapper warning. Use GlobeControls.setEllipsoid()
instead of the deprecated setTilesRenderer() path. Revert
@petamoriken/float16 to 3.9.2 and remove unnecessary import map
entries.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Add TileCreasedNormalsPlugin to webgl_loader_3dtiles
5b74597 
Replace reconstructNormal with a TileCreasedNormalsPlugin that
recomputes normals using toCreasedNormals with a 30 degree crease
angle. This produces better deferred lighting and avoids screen-space
artifacts with TilesFadePlugin.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Use adjustHeight for camera drift workaround in webgl_loade…
fa34554 
…r_3dtiles

Replace disabling controls entirely with setting adjustHeight to false
until first user interaction, as suggested by the 3d-tiles-renderer
author. This keeps controls functional while preventing camera drift
during tile loading.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Remove unnecessary import map entries in webgl_loader_3dtiles
a601f20 
Remove transitive dependency entries that are already bundled in the
build files: @takram/three-atmosphere/shaders, tiny-invariant,
@petamoriken/float16, astronomy-engine, url-join.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob @claude
Examples: Add time-of-day slider to webgl_loader_3dtiles
79bb86e 
Add an HTML range slider that controls the sun direction by hour (UTC).
This allows viewing different lighting conditions including sunrise,
sunset, and nighttime. Also use THREE.MathUtils.DEG2RAD and dispose
old geometry in TileCreasedNormalsPlugin.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob

mrdoob commented Mar 31, 2026

Copy link
Copy Markdown
Owner Author

@gkjohnson Would be nice to replace THREE.Clock with THREE.Timer at some point too...

warn @ three.core.js:2001
three.core.js:2001 THREE.THREE.Clock: This module has been deprecated. Please use THREE.Timer instead.

This warning seems to be coming from EnvironmentControls:

https://github.com/search?q=repo%3ANASA-AMMOS%2F3DTilesRendererJS+Clock&type=code

@mrdoob @claude
Examples: Simplify deltaTime handling in webgl_loader_3dtiles
0f8b974 
Compute deltaTime from the requestAnimationFrame timestamp in
animate() instead of using a fragile _isFirst flag pattern. All
adapters now read the shared _deltaTime computed once per frame.

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
@mrdoob mrdoob merged commit e48228f into dev Mar 31, 2026
9 checks passed
@mrdoob mrdoob deleted the 3dtiles-clouds branch March 31, 2026 07:27
@gkjohnson

gkjohnson commented Mar 31, 2026

Copy link
Copy Markdown
Collaborator

@gkjohnson Would be nice to replace THREE.Clock with THREE.Timer at some point too...

This will have to happen on a breaking release. The three.js versions supported by the project is back to v0.167.0 which does not include Timer.

@shotamatsuda shotamatsuda mentioned this pull request Apr 4, 2026
Closed
@gkjohnson gkjohnson mentioned this pull request Apr 10, 2026
Merged
@mrdoob mrdoob mentioned this pull request Jun 10, 2026
Merged
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@gkjohnson gkjohnson gkjohnson left review comments

+1 more reviewer

@shotamatsuda shotamatsuda shotamatsuda left review comments

Reviewers whose approvals may not affect merge requirements

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

r184

Development

Successfully merging this pull request may close these issues.

3 participants

@mrdoob @gkjohnson @shotamatsuda