Sıvı Metal Shader Tasarımı

Görsel Doku Olmadan Krom Benzeri Yüzey

Liquid Metal, tek bir tam tuvalli shader kompozisyonu üzerine kurulu resmî bir OpenDesign grafik örneğidir. Yazarın başlığı olan “Molten chrome, zero textures.” temel kısıtı ortaya koyar: yüzey, görsel varlıklardan oluşan bir illüstrasyon olarak değil, bir malzeme çalışması olarak sunulur.

Destekleyici satır, metal gibi gölgelendirilmiş alan çarpıtmalı bir gürültü alanını, süpürücü bir speküler parlamayı ve yanardöner ince film paletini anlatır. Bu ifade yakalanan karelerde görülenle birebir örtüşür: katlanmış, akışkan bantlar; keskin beyaz yansımalar; lavanta ve mordan camgöbeği, yeşil ve macentaya kayan renk.

Bu Tasarım Nerede İşe Yarar

Bu çalışma, görsel yüzeyin daha büyük bir etkileşim modeliyle yarışmadan atmosfer taşıması gerektiğinde en çok işe yarar. Kesintisiz tuvali; WebGL hero uygulamaları, üretken sanat çalışmaları veya hareket odaklı görsel kimlik işleri için referans olabilir.

Yazarın tanımladığı kontrollerin olmaması dikkati render edilen alanda tutar. Bu, örneği incelemeyi kolaylaştırır; ancak bir ürün uyarlamasının bu kararların zaten çözüldüğünü varsaymak yerine kendi etkileşim modelini, erişilebilirlik yaklaşımını ve içerik ilişkisini tanımlaması gerektiği anlamına da gelir.

Kompozisyon Nasıl Değişiyor

Üç kare de küçük yeşil bir LIQUID METAL üst etiketini, çok daha büyük “Molten chrome, zero textures.” başlığını, destekleyici açıklamasını ve sağ üstte bir WebGL2 rozetini korur. Shader bu sabit hiyerarşinin altında değişir. Altı katmanlı gürültü bir yükseklik alanı oluşturur; komşu yükseklik örnekleri yüzey normallerini tahmin eder, hareketli bir ışık, keskin bir speküler terim ve yanardöner bir palet ise krom benzeri görünümü yaratır.

view-1'de soluk lavanta ve beyaz baskındır; dar mavi ve mor kanallar alanı keser. View-2 daha koyu yeşil ve mavi bantlara kayar, yüzeyi daha yönlü ve uzamış gösterir. View-3 daha güçlü macenta, zeytin ve dumanlı gri alanlar getirir. Bunlar ekran görüntülerinde kaydedilmiş ayrı durumlardır; kullanıcının seçebildiği bir palete ya da ölçülmüş bir performans moduna kanıt oluşturmaz.

01

View-1

Lavanta ve mor baskındır; yoğun beyaz vurgular yumuşak bir krom görünümü oluşturur.

02

View-2

Yeşil ve koyu mavi kanallar daha görünür hâle gelir ve daha uzun yönlü bantlar oluşturur.

03

View-3

Macenta, zeytin ve dumanlı gri, renk çeşitliliği hissini artırır.

Sabit Tipografi, Değişken Alan

Büyük beyaz başlık görsel alanın üzerinde alçakta durur, küçük yeşil LIQUID METAL etiketi ise ondan önce gelir. Bu sıralama, izleyicinin daha uzun malzeme açıklamasını okumadan önce konuyu tanımasını sağlar. Bedeli, tipografinin çalışmanın büyük bir alanını kaplaması ve incelemeye açık, engellenmemiş shader yüzeyini azaltmasıdır.

Yansıtıcı Kontrast

Parlak, dar vurgular çarpıtılmış formların hatlarını tekrar tekrar çizer. Cilalı metal izlenimini yaratırlar; daha koyu kanallar ise bu vurgulara izleyecekleri kenarlar verir. Etki kontrasta dayandığından, daha sakin bir palet veya daha düşük vurgu yoğunluğu, bazı bölgelerde metin kontrastını iyileştirse bile malzemeyi muhtemelen daha az okunur kılar.

Görünen Davranış ve Sınırlar

Kaynak, otomatik WebGL2 render'ı, geçen süreye dayalı animasyonu ve tuval yeniden boyutlandırmayı uygular. İşaretçi hareketi, tıklama veya klavye kontrolleri için olay işleyicisi tanımlamaz. Yerel bir kare hızı tahmini WebGL2 rozetinde yaklaşık yarım saniyede bir güncellenir; bu, bu render oturumunu tanımlar, garanti edilmiş GPU performansını değil. Etki, kromun prosedürel bir görsel yaklaşımıdır; fiziksel bir erimiş metal simülasyonu değildir.

Statik işaretlemede yazarın tanımladığı hiçbir kontrol görünmez ve sunulan kanıtlar bağlı servisleri, saklanan kullanıcı verilerini, üretim ortamına dağıtımı, etkileşim girdilerini veya ilk oluşturma sırasında kullanılan modeli doğrulamaz. Bir yeniden oluşturma bu yetenekleri önerebilir, ancak bunlar tasarımın kendi doğruladığı şeylerin dışındadır.

1. Tuvali Yerel Tutun

   Shader'ı kendi içinde tamamlanmış bir görsel katman olarak ele alın ve harici uygulama davranışını ayrıca tanımlayın.

2. Ekran görüntülerini metriklerden ayırın

   Üç kareyi görsel çeşitliliği tartışmak için kullanın; çalışma zamanı performansını ise hedeflenen ortamda bağımsız olarak ölçün.