2010-11-27 22 views
7

HTML5 tuval nesnesini kullanarak basit bir 3B motoru oluşturuyorum. İyi çalışıyor ama kırmızı/mavi anaglif işlemeyi uygulamak istiyorum, böylece kırmızı/mavi gözlükleri kullanarak 3D'yi gerçekten görebiliyordum. Şu anda, iki kez oluşturulmuş 3B nesneyi, ikinci kamera kameranın ilk kamera pozisyonunun hemen yanında ikinci kez kullanıyorum.HTML5 tuvalinde anaglif 3D görüntü oluşturma

Karşılaştığım sorun, bir anaglif için doğru renge sahip olmak için oluşturulan iki nesneyi birleştirmek. Şimdi globalAlpha = 0.5 kullanıyorum ve ilkini kırmızı, ikincisi mavi renkte yapıyorum. Bununla birlikte, bu sadece kırmızı nesneden etkilenen pikseller kırmızı kalmalı, ancak arka plan rengim siyah olduğu için siyah ile kırmızı arasındaki renk haline geldiğinden, bu tamamen çalışmaz. uygulama oluşturma 3D anaglyph bir göz çekerken

, ben kırmızı ve mavi piksel birlikte aşağıdaki şekilde hesaplanır fark:

255 0 0 
0 0 255 
------------- + 
255 0 255 

HTML5 tuval ancak böylece arka plan eğer, alfa kullanan tüm pikselleri hesaplarken Renk kırmızıdır, kırmızı bir piksel kırmızı-koyu kırmızı renk alır. Temel olarak kırmızı nesnenin piksellerine ihtiyacım var, sadece her bir pikselin kırmızı bileşenini etkiler ve mavi nesnenin pikselleri her bir pikselin yalnızca mavi bileşenini etkiler.

Her piksel için çalışıyor olabilirim, ancak bu mümkün olabilir ve performans bozucu olmaz mı? Sanırım saniyede 20 kare yapıyorum, bu yüzden herhangi bir pratik kullanımın olmayacağını tahmin ediyorum. Herhangi bir öneri takdir edilecektir.

Bu görüntü bütünü açıklık umut:

Example

cevap

5

bu davranışı etkileyen değiştirebilir tuval bağlamın bir globalCompositeOperation özelliği yoktur. Özellikle, 'daha hafif' olarak ayarlandığında, herhangi bir çizim işleminin renklerini kaynak görüntüye ekleyecektir. Bu ayrıca alfa değerine de saygı gösterecektir. Karmaşık bir sahne ise, sahneyi iki kez, her biri gizli bir tuval üzerine çizmeniz gerekebilir, ardından her birini, karma çalışma olarak 'çakmak' olarak ayarlanmış görünür tuvalin içine kopyalayın.

+0

Bir milyona teşekkürler, bu tam olarak aradığım şey gibi görünüyor! Kırmızı ve mavinin eklenmesi, onu da kullandığım anaglif uygulamada olduğu gibi pembe yapar. Ayrıca, arka plan rengi sonucu herhangi bir şekilde etkilemiyor gibi görünüyor. – pimvdb

İlgili konular