EN
Sylva: A Year in Glass
Move through spring, summer, autumn and winter inside a glass-bottle world.
Original prompt
EnglishCreate “Sylva - A Year in Glass,” a beautiful interactive miniature landscape inside a horizontal glass bottle. Build the complete experience using Three.js + TSL in one standalone HTML file, with ES modules loaded from a CDN.
ART DIRECTION
Make the scene feel like a carefully crafted botanical miniature photographed in a studio. Use a soft neutral background, natural colors, gentle shadows, realistic glass highlights, and restrained typography.
The bottle should rest horizontally on two wooden supports, with a textured cork in its neck. Keep the entire composition visible in the initial camera view.
LANDSCAPE
Inside the bottle, create:
A mature maple tree with a curved trunk, branching roots, and delicate twigs.
Moss, grass, ferns, small flowers, and scattered stones.
A winding, shallow stream with visible pebbles beneath the surface.
A small arched wooden bridge and a stone lantern.
Fill the space beneath the landscape with a closed, solid volume of soil that follows the bottle’s inner curvature. Show subtle layers of earth through the glass.
Place the bridge on stone foundations embedded in both banks. Connect its boards, supporting beams, posts, and handrails correctly. Keep vegetation out of the bridge deck.
DETAILED TREE AND FOLIAGE
Create approximately 4,000–6,000 individually shaped, instanced maple leaves.
Give the leaves:
Lobed silhouettes and visible veins.
Slight curvature and varied orientations.
Natural variation in size and color.
Subtle wind movement with different phases.
Build smooth, continuous junctions between the trunk and major branches. Blend their geometry and bark shading so they appear to grow together.
Keep the entire tree inside the bottle. Account for leaf size, rotation, and wind displacement when checking clearance from the glass.
CONTINUOUS SEASONAL TRANSITIONS
Use one continuous annual timeline to control the whole environment.
Spring:
Snow gradually melts, the stream becomes visible, flowers appear, and individual leaves unfold at different times.
Summer:
The canopy becomes full and green, with gentle leaf movement and flowing water.
Autumn:
Leaves gradually change through yellow, orange, and red. Each leaf detaches at its own time, tumbles downward, and settles on the ground.
Winter:
The canopy becomes bare, snow accumulates on upward-facing branches, rocks, and soil, and the stream gradually appears frozen. Add gentle snowfall inside the bottle.
Make every transition gradual and reversible through the timeline. Avoid synchronized changes across the entire canopy.
GLASS AND WATER
Use physically based glass shading with transmission, subtle refraction, believable thickness, and soft reflections.
Ensure the glass does not hide the stream or other transparent objects.
For the stream, combine fine animated ripple normals, restrained surface displacement, moving highlights, depth-dependent color, and subtle caustic patterns on the bed. Keep its surface connected naturally to the banks.
CONTROLS
Provide a compact interface with English labels:
Spring, Summer, Autumn, and Winter buttons.
A continuous time-of-year slider.
Play/Pause for an automatic annual cycle.
Slow camera orbit.
Close-up and reset-view buttons.
Music on/off and a volume slider.
Enable mouse and touch orbit controls immediately. Manual interaction must cancel automatic camera transitions.
AUDIO
Create quiet, original piano-inspired ambient music using the Web Audio API. Start sound only after user interaction and use smooth volume fades.
TECHNICAL QUALITY
Use Three.js WebGPURenderer and TSL for foliage animation, seasonal shading, and water effects, with the supported WebGL2 fallback.
Generate geometry and textures procedurally. Optimize repeated details with instancing, cap pixel density, and support responsive resizing.
Include loading and error states. Verify all controls, seasonal transitions, mobile framing, leaf containment, solid terrain, and bridge foundations. Inspect the bare winter tree closely to check branch junctions.
Deliver the complete working scene with particular attention to detailed foliage, natural seasonal changes, and the craftsmanship of the miniature.简体中文
创建“Sylva - A Year in Glass”：一个置于横放玻璃瓶中的精美交互式微缩景观。使用 Three.js + TSL，在单个独立 HTML 文件中构建完整体验，通过 CDN 加载 ES 模块。
艺术方向
让场景像在摄影棚里拍摄的精心制作的植物微缩模型。使用柔和的中性背景、自然的色彩、轻柔的阴影、真实的玻璃高光和克制的字体排版。
玻璃瓶应横放在两个木制支架上，瓶颈中塞着有纹理的软木塞。初始镜头视角要能看到完整构图。
景观
在瓶中创建：
一棵成熟的枫树，树干弯曲，根部分叉，枝梢纤细。
苔藓、草、蕨类植物、小花和散落的石头。
一条蜿蜒的浅溪，水面下的鹅卵石清晰可见。
一座小型拱形木桥和一盏石灯笼。
在景观下方填入封闭、坚实的土壤体块，沿着瓶内侧弧度塑形。透过玻璃能看到细微的土层。
将桥架在嵌入两岸的石基上。正确连接桥板、支撑梁、立柱和扶手。不要让植物长到桥面上。
树木与叶片细节
创建约 4,000–6,000 片分别塑形、以实例化方式呈现的枫叶。
叶片应具有：
分裂的叶形轮廓和可见的叶脉。
轻微弯曲，并朝向各不相同。
尺寸与颜色的自然变化。
不同相位的轻微风动。
使树干与主要树枝之间的连接平滑连续。融合其几何形状与树皮着色，让它们看起来自然生长在一起。
整棵树必须位于瓶内。检查叶片与玻璃的间距时，要考虑叶片尺寸、旋转和风动位移。
连续的季节过渡
用一条连续的年度时间轴控制整个环境。
春季：
积雪逐渐融化，溪流显现，花朵出现，每片叶子在不同时间舒展。
夏季：
树冠变得繁茂翠绿，叶片轻轻摆动，溪水流淌。
秋季：
叶片逐渐变为黄色、橙色和红色。每片叶子在各自的时间脱离树枝，翻转着落下，并停在地面上。
冬季：
树冠变得光秃；朝上的树枝、岩石和土壤表面积雪；溪流逐渐呈现冻结状态。瓶内有轻柔的降雪。
通过时间轴使每一次过渡都渐进且可逆。避免整个树冠同步变化。
玻璃与水
使用基于物理的玻璃着色，呈现透光、轻微折射、可信的厚度和柔和的反射。
确保玻璃不会遮住溪流或其他透明物体。
对于溪流，结合细腻的动态波纹法线、克制的水面位移、移动的高光、随深度变化的颜色，以及溪床上轻微的焦散图案。让水面自然衔接两岸。
控制
提供带英语标签的紧凑界面：
春、夏、秋、冬按钮。
连续的年度时间滑杆。
自动年度循环的播放／暂停控制。
缓慢的镜头环绕。
特写与重置视角按钮。
音乐开／关和音量滑杆。
立即启用鼠标和触摸环绕控制。手动交互必须取消镜头自动过渡。
音频
使用 Web Audio API 创作轻柔、原创的钢琴风格环境音乐。仅在用户交互后启动声音，并以平滑方式淡入淡出音量。
技术质量
使用 Three.js WebGPURenderer 和 TSL 制作叶片动画、季节着色与水面效果，并提供受支持的 WebGL2 回退方案。
以程序方式生成几何形状和纹理。用实例化优化重复细节，限制像素密度，并支持响应式尺寸调整。
包含加载状态与错误状态。检查所有控制、季节过渡、移动端画面取景、叶片是否全部位于瓶内、坚实的地形及桥梁基础。仔细检查冬季光秃的树木，确认树枝连接处的质量。
交付完整可运行的场景，特别注重细致的叶片、自然的季节变化，以及微缩景观的精巧工艺。日本語
「Sylva - A Year in Glass」を制作する。横たえたガラス瓶の中に、美しいインタラクティブなミニチュア風景を作る。Three.js + TSL を使用し、CDN から ES モジュールを読み込む単一の独立した HTML ファイルに、体験全体を実装する。
アートディレクション
スタジオで撮影した、丁寧に作られた植物のミニチュアのようなシーンにする。柔らかなニュートラルカラーの背景、自然な色、穏やかな影、写実的なガラスのハイライト、控えめなタイポグラフィを使う。
瓶は二つの木製の台に水平に載せ、瓶の首には質感のあるコルク栓を差す。最初のカメラ視点で構図全体が見えるようにする。
風景
瓶の中に次のものを作る：
曲がった幹、枝分かれした根、繊細な小枝を持つ、成熟したカエデの木。
苔、草、シダ、小さな花、点在する石。
水面の下に小石が見える、曲がりくねった浅い小川。
小さなアーチ型の木橋と石灯籠。
風景の下を、瓶の内側の曲面に沿った、閉じた堅固な土の体積で満たす。ガラス越しに繊細な土の層が見えるようにする。
橋は両岸に埋め込んだ石の基礎の上に置く。橋板、支持梁、柱、手すりを正しくつなぐ。橋の床板には植物を生やさない。
木と葉の細部
それぞれ形を作り、インスタンス化したカエデの葉を約 4,000–6,000 枚作る。
葉には次の特徴を与える：
切れ込みのある輪郭と見える葉脈。
わずかな湾曲と多様な向き。
大きさと色の自然なばらつき。
位相がそれぞれ異なる、かすかな風による動き。
幹と主要な枝の接合部を滑らかで連続した形にする。形状と樹皮の陰影をなじませ、自然につながって成長したように見せる。
木全体を瓶の内側に収める。葉とガラスとの距離を確認する際には、葉の大きさ、回転、風による変位を考慮する。
連続する季節の移り変わり
一つの連続した年間タイムラインで環境全体を制御する。
春：
雪が徐々に解け、小川が見え始め、花が咲き、葉がそれぞれ異なる時に開く。
夏：
樹冠は青々と茂り、葉が穏やかに揺れ、水が流れる。
秋：
葉は徐々に黄色、オレンジ色、赤色へと変わる。葉は一枚ずつ異なる時に枝を離れ、回転しながら落ち、地面に積もる。
冬：
樹冠は葉を失い、上向きの枝、岩、土には雪が積もり、小川は次第に凍って見えるようになる。瓶の中では穏やかに雪が降る。
タイムライン上のすべての変化を段階的かつ可逆的にする。樹冠全体が同時に変わらないようにする。
ガラスと水
透過、繊細な屈折、説得力のある厚み、柔らかな反射を備えた、物理ベースのガラスシェーディングを使う。
ガラスが小川やほかの透明な物体を隠さないようにする。
小川には、細かなアニメーションするさざ波の法線、控えめな水面変位、移動するハイライト、深さに応じた色、川底のかすかなコースティクス模様を組み合わせる。水面は両岸と自然につながるようにする。
操作
英語のラベルを持つコンパクトなインターフェースを用意する：
春、夏、秋、冬のボタン。
年間の時期を連続的に選べるスライダー。
年間サイクルの自動再生を切り替える再生／一時停止。
ゆっくりとしたカメラの周回。
クローズアップと視点のリセットのボタン。
音楽のオン／オフと音量スライダー。
マウスとタッチによる周回操作をすぐに使えるようにする。手動操作が行われたら、自動カメラ遷移を中止する。
音声
Web Audio API を使い、静かなオリジナルのピアノ風アンビエント音楽を作る。ユーザー操作の後にだけ音を鳴らし、音量は滑らかにフェードさせる。
技術的な品質
Three.js WebGPURenderer と TSL を使って葉のアニメーション、季節ごとのシェーディング、水の表現を作り、対応する WebGL2 フォールバックを用意する。
形状とテクスチャはプロシージャルに生成する。繰り返す細部はインスタンス化で最適化し、ピクセル密度を制限し、レスポンシブなサイズ変更に対応する。
読み込み状態とエラー状態を含める。すべての操作、季節の遷移、モバイルでの構図、葉が瓶内に収まること、堅固な地形、橋の基礎を確認する。葉のない冬の木をよく観察し、枝の接合部を点検する。
葉の細部、自然な季節の変化、ミニチュアの手仕事の精巧さに特に注意を払い、完全に動作するシーンを納品する。