Three.js Post-Processingyazan CloudAI-X

Three.js Post-Processing Skill.

Ekran efektlerini birbirinden bağımsız filtreler olarak değil, sıralı bir render hattı olarak ele alın.

3D
Three.js

OpenDesign İndir Kullanım Kılavuzunu Görüntüle

Kaynak İncelemesi · Three.js Post-ProcessingSKILL.md

Görev 3D Çıktılar • Sıralı bir composer pass zinciri • Görsel bir amaca bağlı efekt ayarları • Yeniden boyutlandırma yönetimi ve efekt maliyeti karşılaştırması Başlamadan Önce Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

Editoryal özet · kaynak incelendi 2026-10-07 · üretilmiş bir örnek değildir

01 İşlevler

Three.js Post-Processing: Ekran Efekti Hattı Oluşturun

Composer kurulumu, ekran uzayı efektleri, özel pass'ler, render hedefleri ve yeniden boyutlandırma.

Kaynağa dayalı iş akışıÇalıştırma benchmark'ı değildir

Çalışma Yaklaşımı

Three.js Post-Processing, render edilmiş bir sahneyi dönüştüren EffectComposer ve pass'leri kapsar. Örnekler arasında parlama, kenar yumuşatma, ortam oklüzyonu, alan derinliği, dış hatlar, renk derecelendirmesi ve özel ekran uzayı shader'ları bulunur.

Malzeme çalışmasından farkı kapsamdadır: son işleme, render edilmiş görüntü üzerinde çalışır ve tüm kompozisyonu etkileyebilir. Pass sırası, hedef çözünürlük, yeniden boyutlandırma yönetimi ve işlenmemiş sahneyle karşılaştırma uygulama planında yer almalıdır. Örnek constructor'ları ve renderer desteğini kullanmadan önce kurulu Three.js sürümüyle doğrulayın.

Beklenen Teslimatlar

Sıralı bir composer pass zinciri
Görsel bir amaca bağlı efekt ayarları
Yeniden boyutlandırma yönetimi ve efekt maliyeti karşılaştırması

Örnek Brief'e Bakın

Brief'ten İncelemeye

01
Amacı Belirleyin
Neyin parlayacağını, neyin odakta kalacağını veya neyin vurgulanacağını belirtin.
02
Pass'leri Birleştirin
Bir sahne render'ıyla başlayın ve yalnızca hedeflenen işlem için gereken pass'leri ekleyin.
03
Karşılaştırın ve Profilleyin
Efektsiz görünümü, yeniden boyutlandırılmış çıktıyı ve hedef çözünürlükteki render maliyetini kontrol edin.

02 Kullanım Alanları

Ne Zaman Kullanılır?

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

Uygun Olduğu Durumlar

Sunum CilasıTemel sahne zaten çalıştıktan sonra kontrollü parlama veya odak uygulayın.
Seçim VurgusuSeçilen geometrinin temel malzemesini değiştirmeden dış hatlarını çizin.

Kontrol Edilecek Sınırlar

Ek Render İşiHer pass maliyet ekleyebilir ve bir sahne sorununu çözmek yerine gizleyebilir.
API Doğrulaması GerekirYakalanan kaynak, sürüme duyarlı constructor'lar ve WebGPU kalıpları içerir.

Bu Girdileri Getirin

Temel SahneEfektlerden önce çalışan bir render sağlayın.
Görsel İşlemİstenen parlama, odak, dış hat veya renk derecelendirmesini tanımlayın.
Performans HedefiÇözünürlüğü, piksel oranını ve hedef cihazları belirtin.

03 Önemli Kararlar

Önemli Kararlar

Hat Mantığı
Sıralama, tek tek efekt ayarlarında gözden kaçabilecek etkileşimleri açıklar.
Geri Alınabilir Efektler
Efektsiz temel görünümle karşılaştırma, çekime hizmet etmeyen pahalı pass'leri kaldırmaya yardımcı olur.

04 Örnek Görev Tanımı

Odaklı Bir Brief Deneyin

Aşağıdaki örnek brief test edilmemiştir. Kullanmadan önce skill'in kurulumunu kontrol edin.

Kurulumu İnceleyin

İlgili threejs-skills dizinini ajan rehberi olarak kullanın. Three.js çalışma zamanı değildir ve sahne varlıklarını kurmaz.

Upstream Kaynak Dosyası

https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-postprocessing/SKILL.md

Çalışan bir Three.js projesi ve renderer gerekir; kaynak örneklerini kurulu sürümle karşılaştırarak doğrulayın. Ek kontroller ve yükleyiciler seçilen yola bağlıdır.

Tek Bir Teslimatla Başlayın

Skill'i çalıştırmadan önce bu brief'teki kapsamı, kaynak materyali ve kısıtları uyarlayın.

Örnek Brief

Bu sahneye ince bir dış hat ve isteğe bağlı bloom eklemek için threejs-postprocessing kullan. Efektsiz bir karşılaştırma sürümü tut, pass sırasını açıkla, yeniden boyutlandırmayı doğrula ve eklenen maliyeti ölç. Kullanmadan önce constructor'ları kurulu sürümle karşılaştırarak kontrol et.

Sonucu İnceleyin

Gerçek çıktıyı bu gözlemlenebilir ölçütlere göre kontrol edin.

Composer, hedeflenen nihai render yoludur.
Efektler yeniden boyutlandırma ve piksel oranı değişikliklerinde korunur.
Etkinleştirilen her pass'in net bir amacı vardır.

OpenDesign, kodlama ajanları için yerel bir tasarım çalışma alanı sağlar. Bu listeleme, skill'in pakete dahil olduğu veya harici araçlarının, kimlik bilgilerinin ve yazılım bağımlılıklarının sağlandığı anlamına gelmez.

OpenDesign İndir Hızlı Başlangıcı Okuyun

05 Kaynak ve Lisans

Kaynak ve Lisans

Bu sayfa, aşağıda bağlantısı verilen sabitlenmiş kaynak revizyonunu açıklar. Upstream davranışı ve gereksinimleri değişebilir.

Kaynak Sahibi: CloudAI-X
Depo: CloudAI-X/threejs-skills
Skill Dosyası: skills/threejs-postprocessing/SKILL.md
Lisans: Doğrulanmadı — yeniden kullanmadan önce upstream koşullarını inceleyin.
İncelenen Sürüm: 2026-10-07 · b1c623076c66

Editoryal Kaynak Özeti

Composer kurulumu, ekran uzayı efektleri, özel pass'ler, render hedefleri ve yeniden boyutlandırma.

Bağlantılı kaynağa dayanan, OpenDesign tarafından hazırlanmış özgün özet. Depo yıldızları tarihli bir popülerlik göstergesidir; skill kullanımını veya kalite puanını göstermez.

06 Başlamadan Önce Sorular

Başlamadan Önce Sorulacak Sorular

Bloom burada bir malzeme özelliği midir?

Hayır. Bu skill bloom'u bir son işleme pass'i olarak sunar.

Çözünürlük neden yeniden boyutlandırmada güncellenmeli?

Composer hedeflerinin ve pass'e özgü uniform'ların çıktıyla uyumlu kalması gerekir.

Güncel WebGPU uyumluluğu garanti mi?

Hayır. Renderer ve kurulu sürüm kontrol edilmelidir.

OpenDesign

Bir Sonraki Tasarım İterasyonuna Yer Açın.

Brief'inizi, kaynak materyalinizi ve tasarım çalışmanızı yerel bir çalışma alanında bir arada tutun. İş akışınıza eklemeden önce skill'in kendi kurulumunu kontrol edin.

OpenDesign İndir Tasarım Skill'lerine Göz Atın