Yazar: 希彼赫
Canlı deneyin Bu proje hakkında
“Orman Geyiği”, tarayıcıda çalışan gerçek zamanlı bir three.js sahnesi: Genç bir geyik Yakushima tarzı dev bir sedir ormanında dolaşırken güneş ışığı ağaç tacındaki boşluklardan süzülüyor, otlar rüzgârda salınıyor, kelebekler çiçeklerin etrafında uçuşuyor. Onu yürüyüşe çıkarın, ışık zerrelerini toplayın, gündüzle mehtaplı gece arasında geçiş yapın — ya da sinematik kameraya bırakıp doğrudan sayfada bir video kaydedin.
Geyik Tripo API ile yapıldı — üretim, akıllı düşük poligon, rigging uyumluluk kontrolü ve dört ayaklı otomatik rigging — ve rig’li bir GLB olarak dışa aktarıldı; orman tamamen prosedürel. Dokular Poly Haven’dan (CC0).
En iyi deneyim, klavyeli bir masaüstü tarayıcıda; telefonda geyiği yürütmek için zemine dokunun, kamerayı döndürmek için sürükleyin.
Öne çıkanlar
- Geyiği WASD ile yürütün ya da zemine tıklayarak oraya gönderin; tırısa geçmek için Shift’i basılı tutun, kamerayı döndürmek için sürükleyin
- Parlayan ışık zerrelerinin içinden geçerek onları toplayın — dokuzunu da toplayınca art arda rüzgâr çanları çalar ve ışık huzmeleri parlar; E’ye basın ya da geyiğe tıklayın, başını kaldırıp size bakar
- Gündüz ile mehtaplı gece arasında geçmek için R’ye, otları yatırıp kelebekleri dağıtan bir rüzgâr için G’ye basın
- Sinematik kamera için C’ye, sayfanın içinde sesli video kaydetmek için V’ye basın; H tuş panelini gizler
Teknik inceleme
Geyik · Tripo ile üretildi ve otomatik riglendi
Geyik bir Tripo API hattından çıkıyor — model üretimi, akıllı düşük poligon, rigging uyumluluk kontrolü ve dört ayaklı otomatik rigging — ve yaklaşık 15.000 üçgenlik, 41 kemikli dört ayaklı bir iskelete ve PBR dokularına sahip bir GLB olarak geliyor. Sayfa onu GLTFLoader ile yüklüyor ve bir sika geyiği boyutunda, yaklaşık 1,55 m baş yüksekliğine ölçekliyor.
Tripo’nun rig’i düzenli adlandırılmış: Her bacak Limb_0’dan Limb_3’e kadar bölümlere ayrılmış, omurga, boyun ve baş da sırayla numaralandırılmış; böylece kod her bacağı, omurgayı ve boynu adıyla bulup doğrudan sürüyor — kemikleri tek tek elle eşlemeye gerek kalmıyor. Bir shader postu sika geyiğinin kızıl kahverengi yaz postu tonuna boyuyor ve sırt boyunca bir sıra soluk benek serpiştiriyor; benekler bind pose koordinatlarına sabitlendiği için geyik yürürken deride kaymıyor, ters ışıkta ise tüylerin kenarında sıcak bir hare beliriyor.
Adım düzeni · Rig üzerinde canlı hesaplanan bir yürüyüş
Yürüyüş, sayfa yüklenirken bu rig üzerinde IK ile hesaplanıyor. Önce toynak yörüngeleri belirleniyor: Yerdeyken her toynak tam olarak gövdenin hızında geriye kayıyor; havadayken kalkıyor, öne uzanıyor ve yeniden yere basıyor. Bacaklar sol arka, sol ön, sağ arka, sağ ön sırasıyla adım atıyor; her biri zamanın yaklaşık %70’inde yerde kalırken gövde yalnızca hafifçe inip kalkıyor ve yalpalıyor. Her bacak, üst ve alt bölümleri bind pose açısında tutan üç parçalı IK ile çözülüyor; ön bacak kalkarken bilek ayrıca bir kez daha kıvrılıyor. Tüm yürüyüş 48 karelik bir döngüye bake edilip AnimationMixer’a veriliyor.
Oynatma hızı, gövde hızının toynakların geriye süpürülme hızına bölünmesiyle bulunuyor; böylece geyik ister ağır ağır yürüsün ister Shift’e basılıyken tırısa geçsin, toynakları asla kaymıyor. Dururken kod, sırtın üst kısmından başa kadar dört kemiği döndürüyor: Geyik bir süre otluyor, başını kaldırıp bir yana bakıyor, sonra yeniden eğiyor — ve adım attığı anda boynu kalkıyor.
Orman · Tamamen kodla yetiştirildi
Geyik dışında ormandaki her şey kodla üretiliyor; kullanılan tek dokular, sedir kabuğu, yosunlu kaya ve orman zemini için Poly Haven’ın CC0 setleri. Dev sedirler yaklaşık 44 m boyunda: Yakındaki ana ağaçlar kendi mesh’lerine sahip, arkadaki sıralar ise InstancedMesh ile toplu olarak çiziliyor; gövde bükülmesi shader’da ve JS’de aynı formülü kullandığından dallar kıvrık gövdelere bağlı kalıyor. Devlerin arasında 8–17 m’lik genç ağaçlardan bir katman yetişiyor; çalılar, eğrelti otları, kayalar ve devrilmiş kütükler de alt örtüyü dolduruyor.
Zemin, vertex shader’da salınan 120.000 örneklenmiş ot yaprağıyla kaplı; G’ye basınca otları yatırıp kelebekleri dağıtan altı saniyelik bir rüzgâr esiyor. Otlar geyiğin nerede olduğunu da biliyor ve çevresinde yana doğru eğiliyor. On sekiz kelebek, geyik yaklaşıp onları ürkütene dek çiçeklerin etrafında tembelce uçuşuyor; sapı ve damarlarıyla eksiksiz 70 yaprak da süzülerek düşüyor ve ışık huzmelerinden geçerken parlıyor.
Işık · Hacimsel huzmeler ve güneş lekeleri
Ağaç tacı birkaç yüz yassı yaprak kümesinden oluşuyor; her biri yerleştirilirken güneş ışığı doğrultusunda zemine izdüşürülüyor ve önceden belirlenmiş 29 huzme noktasından uzak tutuluyor; böylece ışık ayrı ayrı huzmeler halinde düşüyor. Hacimsel ışık, her bakış ışını boyunca adım adım ilerleyip güneşin gölge haritasını yarım çözünürlükte örnekliyor; ardından mesafe sisi, ACES ton eşleme, bloom ve FXAA ile birleştiriliyor.
Gölgeler PCSS yumuşak gölgeler olarak yeniden yazılmış — engelleyen nesneden uzaklaştıkça kenar yumuşuyor — ve ağaç tacından sızan ışık lekeleri ışık uzayında hesaplanıyor; böylece ot, ağaç kabuğu, geyik ve ışık huzmeleri aynı deseni paylaşıyor. Havadaki toz yalnızca huzmelerin içinde parlıyor, gölgede ise neredeyse görünmez oluyor. R’ye basınca sahne üç saniyede geceye geçiyor: Güneş soğuk ay ışığına dönüşüyor, huzmeler sönükleşiyor ve ışık zerreleri ateş böcekleri gibi parlıyor.
Kamera ve kayıt · Doğrudan sayfada çekin
Sinematik kamera için C’ye basın: Geyiğin etrafında yavaşça dönüyor, yükselip alçalıyor ve tüm arayüz gizleniyor. Kaydetmek için V’ye basın — MediaRecorder, WebGL tuvalini sesle birlikte 60 fps ve 16 Mbps’de yakalıyor; tarayıcı destekliyorsa MP4, desteklemiyorsa WebM olarak kaydediyor. Kayıt sırasında kalite seviyesi kilitli kaldığından çözünürlük klibin ortasında asla değişmiyor.
Tüm sesler Web Audio ile anlık olarak sentezleniyor: Topladığınız her ışık zerresi için pentatonik bir gamda yükselen bir rüzgâr çanı, rüzgâr estiğinde de bir uğultu. Çözünürlük kare hızına uyum sağlıyor ve kare düştükçe bir kademe iniyor; 1 / 2 / 3 tuşlarıyla düşük, orta veya yüksek kaliteyi elle kilitleyebilirsiniz.
