顯示具有 進度 標籤的文章。 顯示所有文章
顯示具有 進度 標籤的文章。 顯示所有文章

2014年12月20日 星期六

14/12/20 Coding

  • 今天成功讓WG-map出現要打倒的怪物
  • 在threex.minecraft下,想要讓player.html有新動作,要加動作要去threex.minecraftplayer.js加
  • 在threex.minecraftplayer.js裡,他要先從THREEx.MinecraftChar()讀人物model,之後再去THREEx.MinecraftCharHeadAnimations(character),把從THREEx.MinecraftChar讀到的model放入THREEx.MinecraftCharHeadAnimations(character)的parameter,也就是character。
  • 要去學習物理碰撞,這樣才能觸發我們的題目,後來參考THREEx - Game Extensions for Three.js之後發現有threex.cannonjs看了它的demo,決定用jeromeetienne/threex.cannonjs · GitHub
  • threex.cannonjs · GitHub的頁面底下也有使用教學
  • 實作於:D:\work\WebGL Learning\threex.cannonjs-master\examples\basic_WG.html
  • 傳統上,我們先設好scene、camera,接著我們要讓我們的3D world導入物理碰撞
  • var worldx = new THREEx.CannonWorld().start();這個用THREEx.CannonWorld().start();所宣告的object,就是我們要拿來進行物理碰撞的世界
  • 接著先參考D:\work\WebGL Learning\threex.cannonjs-master\examples\domino.html,來學習讀取model後如何使用threex.cannonjs來產生物理碰撞
  • 首先我們先生成我們要的model,命名為mesh,紅框、綠框是mesh的內容物,像是形狀、顏色,接著我們把mesh這個model,透過scene.add()加入我們的scene中。
  • 接著,我們宣告一個var body = new THREEx.CannonBody({}),這讓我們可以把mesh加入有物理運動效果的世界中,THREEx.CannonBody({})的parameter要用中括號{}包起來,在{}裡有兩個properties,第一個property,mesh: 拿來放我們要進行物理效果的model,第二個property,mass: 若設為0或小於0的數字,則會固定不動,設為大於零的數字就跟沒設一樣,這個可有可無,通常是拿來設定山、地面這種物體用的。
  • 接著我們繼續著THREEx.CannonBody({})後面加入.addTo(worldx),addTo裡面的parameter會自動被設為當初用THREEx.CannonWorld().start();宣告的object
  • 被加入我們的物理碰撞世界worldx之後,若想要讓我們讓我們的model產生物理效果或是控制它,可以在var body = new THREEx.CannonBody({})之後使用body.body.applyForce()或是參考basic.html的bodyx.body.angularVelocity.set(0,0,20)。
  • 試了一天,雖然在D:\work\WebGL Learning\threex.cannonjs-master\examples\basic_WG.html成功得到物理碰撞的效果,但是後來發現,這不是我要的,這只是畫面上看起來有碰撞,我要的是,一個觸發的效果,當我WG-Map的小人接近地圖中的動物時,能觸發我們的題目
  • 後來繼續查資料看到這demo,可以使用THREEx - Game Extensions for Three.js裡面的jeromeetienne/threex.colliders · GitHub







2014年12月19日 星期五

14/12/19 Coding

Project.1
目標:記錄Require.js實作過成的點滴。
路徑:D:\work\JavaScript\RequireJsPractice
  • npm install requirejs將Require.js安裝於D:\work\JavaScript\node_modules\requirejs
  • 在實作初就遇到bug,實作3. R​​equireJS基本使用這節時,我把範例中的main.js改命名為package.require.js,這是當初mike-map的習慣,果然馬上就失敗了
  • 抓bug時發現,是命名的問題,由於index.html裡,我引用require.js的script tag,其attritube是把這script指向main.js透過data-main='main',而我們的project裡沒有main.js,所以當然會報錯。
  • 接著我把data-main='main'改成data-main='package.require'就能run了
  • 為了避免麻煩,在此我把package.require.js改回main.js,index.html裡的script tag的attritube也改回data-main='main'
  • 接著我們要來實作這篇文章的5. RequireJS模塊化這節,接著我們要來實作這篇文章的5. RequireJS模塊化這節,稍微研究5. RequireJS模塊化6. 多路徑配置: baseUrl,paths這兩節後,想嘗試mike-map那種define的用法,找不太到相關文獻,所以直接實作嘗試,在RequireJsPractice資料夾底下,我們新建一個index for module.html

2014年12月18日 星期四

14/12/8 coding:WG-Map加入多個animal model

最近開始,學一個東西資料讀累後,跑去讀另一個東西,然後就開始實作那另一個東西,等做完這令一個東西要回來寫原來的東西時,發現進度到哪都忘光光了........,所以coding週記,開始 ^_^

12/18

project.1
目標:WG-Map加入多個animal model,註解標題:自定義的要打倒的動物
路徑:D:\work\WebGL Learning\WG-map
  • 要先在require加入threeX.romemodelsWG,done
  • 程式能run,但是看不到動物
  • test:是否Require.js用錯,再另一個project下放minecraft的人物
  • project: D:\work\WebGL Learning\threex.romemodelsWG\examples\select.html
  • 稍微研究一下發現,若要把threex.romemodelsWG改用require.js去寫,那幾乎是整個project重寫,所以乾脆重新開個project寫比較實際
  • 新project:D:\work\WebGL Learning\WG.requirejs testing
  • 連renderer.setClearColor( 0xbbbbbb );的背景顏色都沒出來,所以有可能是require.js的問題
  • 為了測試問題是什麼,以minecraft為主,romemodelsWG為輔,開了一個新project:WG.MinecraftAndAnimals
  • D:\work\WebGL Learning\WG.MinecraftAndAnimals
  • 找出失敗原因:兩個model居然連在一起
  • 後來把minecraft的model關掉後發現讀不到animal的skin
  • 為了測試問題是什麼,以romemodelsWG為主,minecraft為輔,開了一個新project:WG.AnimalAndMincraft
  • D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\Ani_n_craft_basic.html
  • 太詭異了,幾乎一模一樣的code複製貼上,Ani_n_craft_basic.html居然能夠run
  • 後來發現,作動畫的array命名不同,Ani_n_craft_basic.html裡動畫是用var onRenderFcts = [],而craft_n_Ani_basic.html的動畫是用var updateFcts = [];。
  • 當初craft_n_Ani_basic.html是用threex.mincraft裡的basic.html改的,然而Ani_n_craft_basic.html是用threex.romemodels裡的basic.html改的。
  • 馬已經能動了,但是馬的皮膚還是出不來

  • 終於找到原因了,因為minecraft的model是直接讀皮膚,不用打光也看得到,然而threex.romemodels裡model是皮膚跟著model一起存成json格式的,我剛剛居然忘記給craft_n_Ani_basic.html上打光的code =..=
  • 回去看WG-Map,可惜不是動畫命名的差異,WG-Map裡動畫的array皆是var onRenderFcts = [];
  • 必須要回去測試用require.js讀取他處.js,回到D:\work\WebGL Learning\WG.requirejs testing
  • 為了要先測試WG.requirejs testing裡的code是能run的,我在D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\下新增一個test require code.html,camera與light的設定採用Ani_n_craft_basic.html,下午9:52初步camera與light的設定成功。
  • 用了requirejs testing裡,"讀取animal的models"、" Minecraft 人物model"這兩個區塊的Code,失敗,所以是code本身就有問題
  • 經測試" Minecraft 人物model"區塊裡的code不能run"讀取animal的models"區塊的code可以run
  • 所以說至少"讀取animal的models"區塊的code,在requirejs testing裡頭要能夠run,但是卻失敗了
  • 所以要來研讀requirejs的用法
  • 在研讀requirejs前,測試requirejs testing裡面的code不用requirejs用正常的寫法能不能run,發現失敗
  • D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\下新增一個test require code2.html,不過修改three.js與threex.romemodels.js存放的位置
  • D:\work\WebGL Learning\WG.AnimalAndMincraft\examples\test requirejs code2.html 採用 D:\work\WebGL Learning\WG.requirejs testing\index.html(未使用require.js)的code能夠run
  • 反覆失敗後,測試用老派的方法,index.html外面的資料夾有著我們的threex.romemodels.js與model資料夾,看看會有什麼效果,經實測後可以run
  • 路徑:D:\work\WebGL Learning\WG.requirejs testing\old way,進去old way\example\index_oldWay.html
  • 後來回去讀threex.romemodels.js的code發現,在threex.romemodels.js裡,與我們的model有關的,是show 動畫的index.html與models資料夾的相對位置
  • 為了測試,我把D:\work\WebGL Learning\WG.requirejs testing\bower_components\threex.romemodelsWG下面的threex.romemodels.js改名為threex.romemodelsRorReq.js
  • threex.romemodelsRorReq.js裡的THREEx.RomeModels.baseUrl從 '../'改成'./bower_components/threex.romemodelsWG/',如此一來我們的index.html才會相對應到model資料夾所在的位置


  • 我把D:\work\WebGL Learning\WG.requirejs testing下的index.html改名為:index_success romemodel.html
  • 對於require.js的測試,我改用WG.requirejs testing底下的index_do_requirejs,無聊試了一下require.js依舊無法run,明天有必要好好研究一下require.js怎麼用了。

2014年9月23日 星期二

[進度] 從一開始到現在

我究竟要做什麼?

一開始我也不知道自己究竟對什麼有興趣,於是我花了碩二一整年"稍微"了解影像處理在幹嘛
天涯何處尋題目


後來發現我缺乏太多專業知識,如果想補足專業並且在影像處理的領域做出自己滿意的東西,不花個兩三年恐怕難以對自己交待。

從OpenGL到WebGL


碩二下時題目還是沒著落,那時我想起了大學曾問過學長OpenGL是什麼,學長那時也不是真正懂,印象中我只記得,學長說那是比OpenCV更高階的東西,於是我在碩二下的尾端開始估狗他的資料,簡單來說OpenGL就像這樣

這應該不用我解釋吧


於是我開始拼命估狗去建OpenGL的環境,印象中我搞了兩三個禮拜才架好環境
某年某月某一天,我估狗OpenGL時發現一個我沒看過的詞:WebGL

於是我就開始估狗各種WebGL相關資料,才知道原來WebGL是在瀏覽器上畫3D model

後來我想起曾看過台大電機的葉丙成老師,曾分享把遊戲融入教育的學習方式


BJ-Online

葉丙成老師也在全球知名的線上開放式課程Coursera導入遊戲結合教學的概念


PaGamO 

我自己也有在教書,於是我決定透過WebGL自己寫一個網頁 3D game當作畢業題目

這個題目我需要些什麼?

Big Data海量資料正夯,我也常覺得每天都在大海撈針

在茫茫網海中,不知花了多少時間搜尋我才找到一篇較適合初學者的網站
稍微研究後我發現,還有一點很重要,電動遊戲最需要的3D model沒有人可以幫我做,我必須要自己做,一樣又在網海中苦苦尋覓撈針,我才決定用Blender這免費軟體

Blender的學習素材來自於
暑假大部分的時間我也都拿來練習建模






暑假差不多過完2/3,我開始思考一個問題,我要做MMO Game,我需要讓使用者創建遊戲帳號,那麼這一個創建帳號的動作該如何達到? 難道是去用SQL嗎?

後來我找到這篇後才稍微理解,可以透過Node.js與Socket.IO來實作,就可達成MMO game的多個帳號同時連線遊玩的效果


整體實作架構


一波三折的學習歷程


一開始時我估狗關鍵字總是鍵入:WebGL tutorial,找到的教學都是很舊的,直到我找到WebGL中文网,那時驚為天人,甚至不惜付費購買高級會員,付了錢才發現我實在太高估中國人的道德與良知了,進階課程的字超小,而且是用圖片貼上去的,有些字還被砍掉,圖片還東缺西缺,只能說自己好傻好天真,決定以後不要跟中國人做生意

於是我開始重回估狗的懷抱強迫自己讀英文資料,一邊看文章一邊看code,同時我也極度需要學習HTML + CSS + JavaScript這些前端工程師的基礎,剛開始的時候我都是看JavaScript 标准参考教程(alpha)這個大陸人寫的教學,看了11天左右,覺得滿疲乏的就跑去看看英文教學網站,一看再度驚為天人,對於基礎知識的學習現在我使用下面這兩個網站

現在大都是透過blogger每天記錄讀了些什麼,這樣以後要回頭找資料也方便


到目前為止感想與結論