Javascript

3.boyutta kamera perspektifi

Geçenki yazımda 3 boyutlu fonksiyon grafiği çizimini öğrendik. Şimdi sıra bu fonksiyon üzerinde dolaşabilmemizi sağlayacak, tam anlamıyla 3 boyutlu bir uzay inşa etmeye geldi. Uzayın içinde dolaşması için bir mankene ihtiyacımız var. İçerideki dünyayı onun gözlerinden görecek, onun hareketlerini kontrol edeceğiz. Mankenimizin ismi “Burak” olsun.

Burak

Mankenimizin uzayı nasıl gördüğünü anlamak için üç tane vektör belirledik. Vektörlerden biri Burak’ın sağ kolu, biri Burak’ın bacakları, sonuncusu ise Burak’ın hangi yöne baktığını gösteren hayali bir vektör. Bu 3 vektörün birbirine dik olması işimizi çok kolaylaştıracak. Burak’ın dünyasını ekranımıza aktarmamız için üçüncü boyuttan ikinci boyuta geçmemiz gerekiyor.

İlk olarak koordinat sistemini, orijin mankenimizin gözlerine denk gelecek şekilde öteleyeceğiz. Daha sonra cismin koordinatlarından Burak’ın görüş vektörü doğrultusundaki bileşenini çıkarıp cismi resimdeki düzlemin üzerine düşüreceğiz. Cismin yeni koordinatlarının Burak’ın sağ kolu doğrultusundaki bileşeni, bizim ekranımızda x, bacakları doğrultusundaki bileşeni ise y koordinatı ile temsil edilecek.

Vektörleri manipüle edebilmek için skaler çarpım, vektörel çarpım, toplama ve çıkarma yapabilen fonksiyonlar yazmamız lazım.

Şimdi işin en can alıcı noktasına geldik. Öyle bir fonksiyon yazacağız ki, argüman olarak bir vektör girdiğimizde, çıktı olarak Burak’ın gözlerinden o vektörün nasıl göründüğünü gösteren iki boyutlu bir vektör alacağız.

Yukarıda gördüğünüz fonksiyonu yazmak benim 1 ayımı aldı, gerçekten ama gerçekten çok büyük iş yapıyor. Vektörü ikinci boyuta indirgedik ama geri dönen vektörün z bileşeni hala duruyor. Z bileşenine de cismin Burak’a uzaklığını atadık. Artık bir mankenimiz var ve mankenimizin gözünden dünyanın nasıl göründüğünü biliyoruz. Şimdi bunu ekrana yansıtmamız lazım. Animate fonksiyonunda çizim yapan kısımları silip yerine aşağıdakini yazacağız.

Resimde göründüğü üzere tüm noktalar print edilmeden önce ikinci boyuta indirgeniyor. Eğer nokta Burak’ın arkasında kalıyorsa else bloğu çalışıyor ve o nokta çizilmeden atlanıyor. Farkındaysanız lineTo() fonksiyonlarının içindeki bölme işleminin payda kısmında vektörün z bileşeni duruyor. Z bileşeni cismin uzaklığına eşit olduğundan, cisim Burak’a ne kadar uzaksa noktalar o kadar ekranın ortasına yaklaşacak, cismin boyutlar küçülecektir. Aşağıda fonksiyon grafiğinin iki farklı açıdan görüntüsünü görüyorsunuz.

Kodun tam haline github sayfamdan ulaşabilirsiniz : https://github.com/farukcansaglam/cameraPerspective

Leave a Reply

Your email address will not be published. Required fields are marked *