3D Görüntüleyici: 4 Adım

2024 Yazar: John Day | [email protected]. Son düzenleme: 2024-01-30 13:21

Merhaba! Programlamaya olan ilgimi gidermek ve umarım sizinkileri de tatmin etmek için size javascript ile kodladığım bir 3D Görüntüleyici göstermek istiyorum. 3D oyun anlayışınızı ilerletmek ve hatta kendi 3D oyununuzu oluşturmak istiyorsanız, bu prototip 3D görüntüleyici tam size göre.

Adım 1: Teori

Bu 3B görüntüleyicinin teorisini anlamak için çevrenizi nasıl gördüğünüzü inceleyebilirsiniz (sadece bir önemli ışık kaynağına sahip olmanıza yardımcı olur). Dikkat edin:

1. Sizden uzaktaki nesneler görüş alanınızın daha küçük bir bölümünü kaplar.
2. Işık kaynağından uzaktaki nesneler daha koyu renkli görünür.
3. Yüzeyler ışık kaynağına daha paralel (daha az dik) hale geldikçe, renkleri daha koyu görünür.

Tek bir noktadan (göz küresine benzer) çıkan bir grup çizgiden oluşan bir görme alanını temsil etmeye karar verdim. Bir sivri top gibi, görüş alanının her bir bölümünün eşit olarak temsil edilmesini sağlamak için çizgilerin eşit aralıklarla yerleştirilmesi gerekir. Yukarıdaki resimde, topun merkezinden uzaklaştıkça başak topundan gelen çizgilerin nasıl daha fazla aralıklı hale geldiğine dikkat edin. Nesneler merkez noktadan uzaklaştıkça çizgilerin yoğunluğu azaldığından, bu, programın gözlem 1 uygulamasını görselleştirmeye yardımcı olur.

Çizgiler, programdaki temel görüş birimidir ve her biri ekrandaki bir piksele eşlenir. Bir çizgi bir nesneyi kestiğinde, karşılık gelen pikseli, ışık kaynağına olan mesafesine ve ışık kaynağına olan açısına göre renklendirilir.

Adım 2: Uygulama Teorisi

Programı basitleştirmek için, ışık kaynağı merkez nokta ile aynıdır (göz küresi: haritanın görüntülendiği nokta ve çizgilerin nereden geldiği). Yüzünüzün hemen yanında bir ışık tutmaya benzer şekilde bu, gölgeleri ortadan kaldırır ve her pikselin parlaklığının çok daha kolay hesaplanmasını sağlar.

Program ayrıca, merkezdeki görüş noktası ile küresel koordinatları kullanır. Bu, çizgilerin kolayca oluşturulmasını sağlar (her biri benzersiz bir teta: yatay açı ve phi: dikey açı ile) ve hesaplamaların temelini sağlar. Aynı tetaya sahip çizgiler, aynı satırdaki piksellere eşlenir. Karşılık gelen açıların phisi, her piksel sırası boyunca artar.

Matematiği basitleştirmek için, 3B harita ortak bir değişkene (ortak x, y veya z) sahip düzlemlerden oluşurken, diğer iki yaygın olmayan değişken bir aralık içinde sınırlandırılarak her bir düzlemin tanımını tamamlar.

Fareyle etrafa bakmak için, küresel ve xyz koordinat sistemleri arasındaki dönüşüm sırasında programın denklemleri dikey ve yatay döndürmeyi hesaba katar. Bu, "sivri küre" görüş çizgileri kümesi üzerinde bir rotasyon oluşturma etkisine sahiptir.

3. Adım: Matematik

Aşağıdaki denklemler, programın hangi çizgilerin her bir nesneyle kesiştiğini ve her bir kesişim hakkında bilgiyi belirlemesini sağlar. Bu denklemleri temel küresel koordinat denklemlerinden ve 2B döndürme denklemlerinden elde ettim:

r=mesafe, t=teta(yatay açı), p=phi(dikey açı), A=Y ekseni etrafında dönüş(dikey dönüş), B=Z ekseni etrafında dönüş(yatay dönüş)

Kx=(sin(p)*cos(t)*cos(A)+cos(p)*sin(A))*cos(B)-sin(p)*sin(t)*sin(B)

Ky=(sin(p)*cos(t)*cos(A)+cos(p)*sin(A))*sin(B)+sin(p)*sin(t)*cos(B)

Kz=-sin(p)*cos(t)*sin(A)+cos(p)*cos(A)

x=r*Kx

y=r*Ky

z=r*Kz

r^2=x^2+y^2+z^2

aydınlatma=Klight/r*(Kx veya Ky veya Kz)

p=arccos((x*sin(A)*cos(B)+y*sin(A)*sin(B)+z*cos(A))/r)

t=arccos((x*cos(B)+y*sin(B)-p*sin(A)*cos(p))/(r*cos(A)*sin(p)))

Adım 4: Program

Umarım bu prototip 3B görüntüleyici, 3B sanal gerçekliklerin işleyişini anlamanıza yardımcı olmuştur. Biraz daha mükemmelleştirme ve kodlama ile, bu görüntüleyici kesinlikle 3D oyun geliştirmede kullanılma potansiyeline sahiptir.