iT邦幫忙

DAY 22
1

30 天實戰跨平台行動APP系列 第 22

Day 22 檢視目標

昨天貼圖結果覺得,地球樣子長得很奇怪,很明顯不符合比例。

然後再睡覺時突然想到,既然我要將Y坐標mapping到0~1,何不就看緯度共分幾格,1 / (緯度分幾格-1) * i 這樣子不就是mapping後的材質坐標了嗎?

所以馬上把材質坐標改成以下:

  var latPace = 1.0 / (this.latitudinalNum-1);

   var longPace =  1.0 / (this.longitudinalNum-1);


  for(var i=0;i<this.latitudinalNum;i++){

  for(var j=0;j<this.longitudinalNum;j++){



	   var texX = j*longPace;
		   var texY = i*latPace;

}

}

果然結果看起來就很正常了!

其實這是我以前常犯的錯誤,就是一開始就把事情想得太難了。而沒有搞清楚最基本的事。

昨天列出的那個圓柱投影法,是說若你想把一個圓球映射成一張地圖的方法,

但是不代表,我抓到的那張地球圖,是用那個公式來映射的。事實是,那地球圖的Y方向的比例很接近緯度等比例映射(至少比那公式接近),

下場就是明明是三秒鐘就能解決的問題,我卻花了一些時間再看圓柱投影的公式。所以一個人solo寫程式的沒人討論,

就是要自己提醒自己,保持頭腦的清醒,時時思考。

到目前為止,地球的精確度我並不是那麼在意,因為我不是要做導航地圖,事實上這個專案比較重視的是美觀。

第一次參加it鐵人的比賽,真的是不容易,要連續三十天,不分假日每天都要貼一篇有內容的文章,而且還不能補貼,

對已經在工作的人來說有點累啊,所以這才叫馬拉松吧!

到目前為止也22天了,Day 3定的目標是15天要把核心功能完成,然後五天移植到iOS,五天移植到android。目前看來,是不可能的,比賽到下禮拜三就結束了,

所以現在改成:這週末把核心功能完成,下禮拜1~3完成ios移植。

核心功能也要重新定義:讓使用者以FB帳號登入後,然後在地球上標示所有曾經被tag過的位置!

再整合FB功能前,還有一些工作要做,

  1. 星星目前不會隨著mv矩陣的位置重新計算,應該是要永遠都平行屏幕
  2. 用滑鼠點擊旋轉,滾輪放大縮小

先來進行第一項。

第一項就代表這些星星的位置是要隨著角度的變化動態產生的,隨著攝影機位置,與mv矩陣更動輸入的參數

因為我們攝影機位置不變,所以主要是要計算入平面向量。

其實只要找出平行螢幕的X方向向量與Y方向向量,再Y cross X 即可得到。

OpenGL 中有一個函式庫glu裡面有一個gluUnproject函式,可以輸入螢幕上的點,得到3D空間中的點!

這個函式就可以來計算X向量及Y向量,只是WebGL並沒有glu函式庫,只能先找找有沒有人做。

果然有人做了WebGL 的unproject,

https://github.com/fintler/webgl-unproject

裡面提供了這個函式

var success = GLU.unProject(
    windowPointX, windowPointY, windowPointZ,
    modelViewMatrix, projectionMatrix,
    viewportArray, modelPointArrayResults);

讓我們可輸入螢幕上的x值,y值即深度z,然後再輸入目前的mv matrix與pMatrix,以及viewportArray,

得到這個點的三維坐標,因此得到以下函式,就可以即時算出入畫面的向量!

var success = GLU.unProject(

    1, 0, 0,

    mvMatrix, pMatrix,

    viewportArray, modelPointArrayResults);


var xvec = modelPointArrayResults;



success = GLU.unProject(

    0, 1, 0,

    mvMatrix, pMatrix,

    viewportArray, modelPointArrayResults);


var yvec = modelPointArrayResults;


normal = vec3cross(yvec,xvec);

明天再繼續處理滑鼠的操作輸入。


上一篇
Day 21 地球圖資
下一篇
Day 23 滑鼠輸入
系列文
30 天實戰跨平台行動APP26

尚未有邦友留言

立即登入留言