SORU
10 HAZİRAN 2013, PAZARTESİ


Gelişmiş Alan Aydınlatma WebGL & ThreeJS

Bir alan WebGL uygulama aydınlatma bu demo için benzer üzerinde çalışıyorum:

http://threejs.org/examples/webgldeferred_arealights.html

Three.js yukarıdaki uygulama ArKano22 bu işten gamedev.net üzerinde taşıdık

http://www.gamedev.net/topic/552315-glsl-area-light-implementation/

Bu çözümler çok etkileyici olsa da, her ikisi de birkaç sınırlamalar var. ArKano22 orijinal uygulama ile esas konu dağıtma vadeli hesaplama yüzey normalleri için hesaba katmaz.

Şimdi birkaç hafta için bu çözüm, bu sorunu çözmek için redPlant tarafından yapılan iyileştirmeler ile çalışma artırmada olmuştur. Şu anda normal hesaplamalar çözümü içine dahil ettim, AMA sonuç yine hatalı.

İşte benim şimdiki uygulama bir ön gösterim:

area lighting teaser

Giriş

Her parça için yaygın terimi hesaplamak için adımları aşağıdaki gibidir:

  1. Alan ışık öngörülen vektör ışığı normal/yönü ile çakışık böylece oturur, o uçağa tepe proje.
  2. Tepe ışığın normal ile izdüşüm vektörü karşılaştırarak alanı ışık uçağın doğru tarafta olup olmadığını kontrol edin.
  3. 2B ışığın merkezi/pozisyon uçakta bu hedeflenen nokta uzaklığı hesaplayın.
  4. Kelepçe bu 2D ışık alanı (genişlik ve yükseklik tarafından tanımlanan) içinde oturur, böylece vektör ofset.
  5. Öngörülen ve kenetlenmiş 2D point 3D dünya pozisyon elde. Buen yakın noktaalan tepe ışık.
  6. Köşe için en yakın nokta vektör (değiştirilmiş) tepe normal arasında nokta ürünü alarak nokta bir ışık için yaptığınız her zamanki dağıtma hesaplamalar.

Sorun

Bu çözüm ile sorunu aydınlatma hesaplamaları yapılıren yakın noktave bu parça daha çok aydınlatıcı olabilir bu ışık yüzeyinde diğer yerler için hesap değil. Çalışayım açıklıyor...

Düşünün aşağıdaki diyagram:

problematic area lighting situation

Alan ışığı her iki yüzeyine dik ve kesişiyor. Yüzey parçalarının her zaman bir dönüş olacaken yakın noktabu alanda ışık yüzeyi ve ışık kesiştiği yer. Yüzey normal ve köşe-için-ışık vektörler her zaman dik olduğundan, aralarında nokta ürün sıfırdır. Daha sonra, yaygın katkısı hesaplanmasına rağmen ışık geniş bir alanda yüzey üzerinde başgösteren olmak sıfırdır.

Olası Bir Çözüm

Ben ışığı hesaplamak yerine öneriyorumen yakın noktaalan ışık, köşe-için-ışık vektör (değiştirilmiş) tepe normal arasındaki en büyük nokta ürün veren bir bölge ışığı bir noktadan hesaplamak. Yukarıdaki şemada, bu mor nokta, mavi nokta yerine olurdu.

Yardım!

Ve bu yüzden, bu sizin yardımınıza ihtiyacımız var. Kafamda, bu noktada elde edilebilir nasıl iyi bir fikrim var, ama çözüme ulaşmak için matematiksel yeterliliğe sahip değil.

Şu anda aşağıdaki bilgileri parça benim shader mevcuttur:

  • köşe konumu
  • normal (birim vektör) köşe
  • ışık konumu, genişlik ve yükseklik
  • ışık normal (birim vektör)
  • ışığa doğru (birim vektör)
  • ışık (birim vektör)
  • yansıtılan ışıklar uçağa tepe (3D) nokta
  • hedeflenen nokta ışıklar merkezi (2D) uzaklığı
  • ofset (2 boyutlu) sabitlenmiş
  • bu dünya pozisyon – ofset kenetlenmişen yakın nokta(3D)

Görsel bir bağlam içine tüm bu bilgileri koymak için, bu şekli oluşturdum (umarım yardımcı olur):

available lighting information

Teklifimi test etmek için ihtiyacım vardöküm noktasıköşe-için-döküm-point (değiştirilmiş) tepe normal arasında nokta ürünü gerçekleştirmek böylece o bölgede hafif kırmızı noktalar tarafından temsil edilen. Yine, bu mümkün olan maksimum katkı değeri verecektir.

!! GÜNCELLEME!

İnteraktif bir kroki şu anda uygulanmakta olan matematik visualises bu CodePen üzerinde oluşturduk:

http://codepen.io/wagerfield/pen/ywqCp

codepen

Odaklanmak gerektiğini relavent kod satırı318.

castingPoint.location THREE.Vector3 bir örneğidir ve bulmacanın kayıp parçası. Ayrıca çizimin sol alt köşesinde 2 değer vardır dikkat etmelidir – bu dinamik olarak ilgili vektör arasındaki nokta ürünü görüntülemek için güncellenir.

Çözüm tepe normal yönü ile örtüşen başka bir sahte uçak gerektirecektir VE ışığın düzleme dik olduğunu düşünüyorum, ama yanılıyor da olabilirim!

Neyse, merhametli dahi orada bana bu çözmeye yardımcı olabilir umuyoruz!

Şimdiden çok teşekkürler.: D

CEVAP
18 HAZİRAN 2013, Salı


İyi haber, bir çözüm var; ama önce kötü bir haber.

Nokta ürünü maksimize noktası kullanarak yaklaşım temelden kusurlu ve fiziksel olarak makul değil.

İlk yukarıdaki şekilde alan ışık sadece sol yarısı meydana geldiğini varsayalım.

"Mor" nokta -- sol yarısı için dot-ürün maksimize ... ... her iki yarısı için dot-ürün maksimize noktası aynıdır kombine.

Eğer önerilen çözüm kullanmak için olsaydı, bu nedenle, bir alanda hafif sol yarısında tüm ışık aynı radyasyonu yayıyor sonucuna varır. Belli ki, bu mümkün değil.

Alan ışığı belirli bir noktada atmalarını ışık toplam tutarı hesaplama için çözümü oldukça karmaşıktır, ancak başvuru için, 1994 gazeteye bir açıklama bulabilirsinizBu Parlaklıktaki Kısmen Tıkalı Çokyüzlü Kaynakları için Jacobianhere.

Bakmanı öneriyorumŞekil 1ve birkaç paragrafBölüm 1.2-- ve sonra durur. :-)

Bunu kolaylaştırmak için, çözüm three.js WebGLRenderer ... ... kullanarak ertelenmiş değil uygulayan çok basit bir shader şifreledim.

Burada keman: http://jsfiddle.net/Us54P/

enter image description here

Parça gölgelendirici çekirdeği oldukça basittir

// direction vectors from point to area light corners

for( int i = 0; i < NVERTS; i    ) {

    lPosition[ i ] = viewMatrix * lightMatrixWorld * vec4( lightverts[ i ], 1.0 ); // in camera space

    lVector[ i ] = normalize( lPosition[ i ].xyz   vViewPosition.xyz ); // dir from vertex to areaLight

}

// vector irradiance at point

vec3 lightVec = vec3( 0.0 );

for( int i = 0; i < NVERTS; i    ) {

    vec3 v0 = lVector[ i ];
    vec3 v1 = lVector[ int( mod( float( i   1 ), float( NVERTS ) ) ) ]; // ugh...

    lightVec  = acos( dot( v0, v1 ) ) * normalize( cross( v0, v1 ) );

}

// irradiance factor at point

float factor = max( dot( lightVec, normal ), 0.0 ) / ( 2.0 * 3.14159265 );

Daha İyi Bir Haber

  1. Bu yaklaşım fiziksel olarak doğru.
  2. Zayıflama otomatik olarak gerçekleştirilir. ( Küçük ışık yoğunluğu daha büyük bir değer gerektirir unutmayın. )
  3. Teorik olarak, bu yaklaşım keyfi çokgenler, sadece dikdörtgen olanlar ile çalışması gerekir.

Uyarılar:

  1. Sadece bu sorunuza adresi nedir çünkü yaygın bileşeni uygulanan var.
  2. Aynasal bileşeni makul sezgisel bir -- sen zaten kodlanmış ne benzer kullanarak uygulamak gerekir, bekliyorum.
  3. Bu basit bir örnek, alan ışığı "yani tüm 4 köşe yüzüm olmaz. uçağın üstünde" ufukta kısmen düşük olduğu gibi işlemez
  4. WebGLRenderer alan ışıklar desteklemiyor beri, "ışık sahne" ve çalışmasını bekliyoruz. ekleyebilirsiniz. Bu özel shader içine gerekli tüm verileri geçmesine neden olur. ( WebGLDeferredRenderer alan ışıklar destekliyor mu, elbette. )
  5. Gölgeler desteklenmez.

three.js r.58

Bunu Paylaş:
  • Google+
  • E-Posta
Etiketler:

YORUMLAR

SPONSOR VİDEO

Rastgele Yazarlar

  • Curso Online Gratuito

    Curso Online

    4 Aralık 2011
  • CZTUTORIALS

    CZTUTORIALS

    28 Ocak 2011
  • WiseOwlTutorials

    WiseOwlTutor

    21 EKİM 2011