Raymarching Heykel Shader Tasarımı

Piksellerden Oluşan Bir Hero

Raymarching Heykel Shader Tasarımı, koyu lacivert bir alanın karşısında büyük yeşil bir prosedürel form sunar. Görünen başlık olan “3D that lives in a fragment shader.”, görüntüyü geleneksel bir 3D varlık olarak değil, bir render çalışması olarak çerçeveler. Bu eşleşme, ziyaretçinin heykelin yüzeyini incelemeden önce teknik öncülü anlamasını sağlar.

Fragment shader, merkezleri zamanla yörüngede dönen beş küre mesafe alanının yumuşak birleşimini sphere-trace ile izler. İkinci, daha kısa bir izleme yumuşak gölgeleri tahmin eder; sonlu fark normalleri parlamaları ve Fresnel tarzı bir kenar ışığını destekler. Yavaş, otomatik bir kamera yörüngesi görünümü değiştirir. Yeşil formlar heykelsi görünse de heykel mesh'i, görsel doku veya akışkan simülasyonu sağlanmamıştır.

Tasarım teknik açıklamayı iri başlığın altında tutar: “No meshes” render yöntemine, ardından belirtilen yörünge hareketine geçer. Bu sıralama görsel fikri bir bakışta okunur kılar; karşılığında shader terminolojisi, grafik programlamaya belli bir aşinalık varsayar.

Kompozisyon Nerede İşe Yarar

Bu tasarım, atmosferin ve teknik kimliğin yoğun gezinmeden daha önemli olduğu ilk ekran hero'su için uygundur. Heykel görsel alanın büyük bölümünü kaplarken sol alttaki etiket ve paragraf, ne gördüğünü merak eden okurlar için bir giriş noktası sunar.

Sağlanan üç durum, render edilen formlar yerleşim değiştirirken aynı metin sistemini gösterir. Bir durumda büyük yuvarlak bir form ortalanır, bir diğerinde üst üste binen formlar belirir, üçüncüsünde ise parlak kenarlı bir form üst alana doğru itilir. Tekrarlanan metin, kontroller ya da ayrı sahnelerden oluşan bir galeri gerektirmeden hareketi konu yapar.

Durum Rozetini Okumak

Sağ üstteki rozet GPU ve Raymarch etiketlerini korur ve yerel olarak hesaplanan bir FPS tahmini ekler. Üç yakalamada bu ortamda 2FPS okunurken açıklama metni 60fps der. Bunlar eşdeğer kanıtlar değildir: sayaç, yakalama oturumunun yeniden çizim hızını tanımlar ve kaynak ifade farklı cihazlarda geçerli bir performans garantisi oluşturmaz.

Işık ve Ölçek Üzerinden Kompozisyon

Heykel bilinçli olarak iri tutulmuştur. İlk yakalamada yuvarlak gövdesi üst ve sağ kenarlardan girer ve tipografinin çevresinde lacivert boşluk bırakır; sonraki durumlar birkaç formu birbirine daha yakın getirir. Formların görüntü alanı sınırında kırpılması nesneyi sayfadan büyük hissettirir, ancak okurun inceleyebileceği kontur miktarını da azaltır.

Yeşilden neredeyse siyaha geçen gölgelendirme ana derinlik ipucunu sağlar. Parlak noktalar formların sol üst veya sağ üst kenarlarına yakın durur; soluk bir kenar ışığı seçili konturları izler. Bu, aksi hâlde koyu olan şekillerin çevresinde gözü bir yola yönlendirir. Bedeli kontrasttır: neon yeşil görsel olarak güçlüdür, bu yüzden daha sönük teknik paragraf kısa tutulmalı ve dikkatle konumlandırılmalıdır.

Editoryal katman, büyük harflerle yazılmış küçük “RAYMARCHED HERO” etiketini, çok büyük iki satırlık bir başlığı ve kompakt bir açıklama paragrafını kullanır. Etiket kategoriyi belirler, başlık fikri söyler, paragraf tekniği adlandırır. Her metin katmanı genel bir hero'yu değil doğrudan raymarching heykelini ifade ettiği için bu üç kademeli sıra bu çalışmaya özgüdür.

1. Alanla Başlayın

   Ek şekiller dikkat için yarışmadan önce aydınlatma modelinin okunabilmesi için koyu lacivert tuvali ve tek bir iri yeşil formu oluşturun.

2. Hacim İpuçları Ekleyin

   Mesh'e özgü ayrıntı eklemeden signed-distance formunu tanımlamak için yumuşak gölgeler, yoğunlaştırılmış parlamalar ve ölçülü bir Fresnel kenarı kullanın.

3. Açıklamayı Yerleştirin

   Hareket durdurulduğunda da görsel deney anlaşılır kalsın diye kategori etiketini, ana ifadeyi ve teknik cümleyi bu sırayla tutun.

Yetenek Sınırı

Bu resmî OpenDesign örneği, yalnızca sahte bir render etiketi değil, gerçek bir yerel WebGL2 uygulaması içerir. Tam ekran bir üçgen, piksel başına en fazla 90 adımlık sphere trace çalıştırır; kodda 0.001 olarak belirtilen mesafe eşiğinde veya sekizi aşan bir menzilde durur ve yumuşak gölgeler için en fazla 24 adım kullanır. Bunlar kaynak bilgileridir; üretime hazırlığın ya da bağlı bir hizmetin kanıtı değildir.

Sahne ve kamera otomatik olarak animasyonlanır. Tek girdi olayı yeniden boyutlandırmadır ve piksel başına işi sınırlamak için render DPR değeri 1,5 ile sınırlandırılmıştır. İşaretçi, klavye, kamera yönlendirme, malzeme düzenleme veya parametre kontrolü yoktur. Yerel FPS tahmini yaklaşık yarım saniyelik pencerelerle güncellenir; ne o ne de kaynaktaki 60fps ifadesi cihazlar arası bir kıyaslama oluşturur.