2014年9月29日 星期一

2014/9/30 今日學習

遊戲名字就取名為
  • 電子二甲大亂鬥 」與 「電子二丙大亂鬥
  • 突然想到一件事,每解五題可以獲得一個新的人物或武器,這樣應該能大大地促進學習動機
發現一個免費model的好地方
稍微看一下後,這網站裡面裡面的3D model格式大多是obj,估狗發現可以用blender轉乘three.js的格式
回去看了一下mrdoob的webgl_animation_skinning_blending,稍微看了一下code後去看他的skin出處(mrdoob-three.js-d3cb4e7\examples\models\skinned\marine),發現也是所有元素集合在一張圖裡面,跟我先前載下來的model不同。

但還是有一點很奇怪,看webgl_animation_skinning_blending的code時發現,沒有讀取skin (MarineCv2_color.jpg)的code,於是回頭看看threex-master\src\threex.romemodels\examples裡的select.html的code與model檔案的出處(threex-master\src\threex.romemodels\models),發現沒有任何skin的.jpg檔
  • 結論:model可以跟skin合在一起然後export成.js檔 (HOW???)


搜尋資料

今天早上無聊看了一下ThreeX裡頭有什麼範例碼可以給我使用,結果發現不少好東西
  • 各種動物的動作效果與現成的model
    • src\threex.romemodels\examples\select.html   
  • 可以做出很亮的效果光
    • src\threex.godrays
  • 超炫的效果製作:flamethrower、rain、snow、blacksmoke、smokepuff、sphericalblast與trailblueparticle(光影的效果)、trailwhitesmoke(跑步時地面揚起灰塵的效果)
    • src\threex.particles\examples
  • 如何做出選單
    • src\threex.tvset\examples

研究程式碼


似乎javascript的 array裡有default method,push()
The length property provides an easy way to append a new element to an array
array的length屬性,返回array的成員數量。

Math.floor
Math.random()
Math.floor() and Math.random() can be used together to return a random number between 0 and 10
遇到一個奇怪的寫法
setInterval(函數, 參數);   而裡面的那個函數,函數的內容物有許多行卻未使用";"程式可run,測試過為他們加上分號,程式依舊可以run


搜尋資料


剛剛疲勞時去看一下THREEx - Game Extensions for Three.js,看了第一排右手邊的threex.md2character,這真的太正了,有各種動作與武器變換,於是我就去了他的GitHub上面載下來
  • 研究看看他的CODE,預計可以從這段CODE理學到如何幫我的人物model裝備武器
今天看了一個有趣的東西,下次來慫恿我的理髮師陪我發神經好了 XD



2014/9/29 今日學習

今天主力在閱讀


    從GitHub下載這作者的tQuery與Boilerplate,動手coding後發現lose不少教學文章提到的東西,後來看了Minecraft Character這篇下面的留言討論串發現,作者把Minecraft Character的相關資源全都移到他整合的ThreeX (GitHub)去了(threex / src / threex.minecraft /),以前用tQuery包好的寫法也改成用threeX包起來,不過依舊可以看到原始Code

    計畫修正

    • 最初想從零開始寫,開始在網路上蒐尋各種相關資料,現在決定先用threeX包好的plugin,先做出個雛形,然後在去寫後台的node.js與socket.i.o

    另外在附上作者每天發的threeX經驗文的目錄




    剛剛找到一個練JavaScript基本功,充滿教學影片的網站

    看到一篇談如何透過Chrome來debugging
    終於開始看程式碼了,看到一個寫法
    var THREEx = THREEx || {};   
    • 這裡的 ||  是指"或"嗎???  → YES
    {} 是指???
    看到一段code
    var deltaMsec = Math.min(200, nowMsec - lastTimeMsec)


    2014年9月27日 星期六

    2014/9/27 今日學習

    當初找到透過tQuery快速建立3D model的文章居然沒備份,重新備份一次

    簡略風格3D model的建立

    Dash 

    • Every time you move your mouse, click something, mouse over something, press a key or scroll, your browser fires off an event
    下面這寫法是jQuery的寫法
    $("button").on("click", function(){
        alert("clicked!")
        });
    • 在這例子中"button"就是我們所需要的 CSS element,而$("button")即是說選擇所有的button,這個$就是指選擇所有,同理也可用於$("h1")或$("p")
    • on()設置了一個event listener,on( , )第一個argument是type of event to listen to,即你要呼叫的事件類型,第二個argument是你要對應的處理方式

    W3School

    HTML DOM

    解釋HTML真的靠這張圖片就對了!!!
    DOM HTML tree

    HTML DOM Methods


    • HTML DOM methods are actions you can perform (on HTML Elements)
    • HTML DOM properties are values (of HTML Elements) that you can set or change
    • In the DOM, all HTML elements are defined as objects.

    HTML DOM Elements  (未讀)



    2014年9月26日 星期五

    2014/9/26 今日學習

    W3School

    Arrays 


    • The easiest way to add a new element to an array is to use the length property:
    example
    var fruits = ["Banana", "Orange", "Apple", "Mango"];
    fruits[fruits.length] = "Lemon";     // adds a new element (Lemon) to fruits


    • 發現一件有趣的,可以在<script>的變數裡設定<ul>
    • 滿有趣的範例code,可以了解如何用array寫一個list

    When to Use Arrays? When to use Objects?

    • JavaScript does not support associative arrays
    • You should use objects when you want the element names to be strings.
    • You should use arrays when you want the element names to be sequential numbers.
    Avoid new Array(). Use [] instead.
    The new keyword complicates your code and produces nasty side effects


    How to Recognize an Array?

    A common question is: How do I know if a variable is an array?
    The problem is that the JavaScript operator typeof returns "object"

    ---05:26pm停頓休息來玩Dash---

    Dash 

    Project 2.2

    <article>
    margin 邊
    margin: 0 auto;  // set margin to "0 auto", it has 0 margin on the top and bottom, and "auto" margin on left and right.

    media query
    @media (條件){
         發生的事
    }

    hex color,example: #F00,都會有hash"#"這符號
    在CSS裡控制color可以用hex color或是rgba(),example:  background: rgba(0, 0, 0, 0.5);
    rgba(R, G, B, transparency),transparency透明度


    題外話
    Inside the function, the arguments are used as local variables.

      2014年9月25日 星期四

      2014/9/25 今日學習

      Dash

      HTML element
      display

      • default value for display usually "block" and "inline"
      • margin creates space on the outside of an element, padding creates space on the inside.

      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每天記錄讀了些什麼,這樣以後要回頭找資料也方便


      到目前為止感想與結論


      2014/9/23 今日學習

      看了幾篇文章

      • The escape character (\) can be used to insert apostrophes, new lines, quotes, and other special characters into a string.
      • Strings Can be Objects. Don't create String objects. They slow down execution speed, and produce nasty side effects
      • Primitive values, like "John Doe", cannot have properties or methods (because they are not objects).But with JavaScript, methods and properties are also available to primitive values, because JavaScript treats primitive values as objects when executing methods and properties.
      Arrays
      • var cars = ["Saab", "Volvo", "BMW"];

      • if you want to use image from your computer in your design, upload it to a site like imgur.com and use the public URL the public URL, not a webpage with the image on it.
      • <link>可以讓你從外部連結.css檔,這樣就不用全部樣板都寫在同一個HTML裡
      • <link href="normalize.css" rel="stylesheet"> normalize.css可以讓你的畫面在不同的browser看起來都較一致, rel always set stylesheet

      今晚準備明天要報告的資料,想起自己需要Node.js

      2014年9月22日 星期一

      2014/9/22 今日學習

      基本功:W3School.com

      function


      scope
      • With JavaScript, the global scope is the complete JavaScript environment.
      • In HTML, the global scope is the window object: All global variables belong to the window object.
      Event

      • You will learn a lot more about events and event handlers in the HTML DOM chapters.

      加入CSS用 <style> 

      今天看了兩篇訓練文



      2014年9月21日 星期日

      2014/9/21 今日學習


      javascript裡的# (shrap) 是什麼???

      發現一個紀錄three.js學習心得的blogger
      看這blogger時發現一個有趣的東西,在網頁上make 3D model
      除了JavaScript之外,jQuery真的太常被提到了,真的該好好學一學才對

      學習英文

      2.4 對象(object)
      • 在JavaScript語言中,所有全局變量都是頂層對象(瀏覽器環境的頂層對象為window)的屬性,因此可以用in運算符判斷一個全局變量是否存在。
      • in運算符只能用來檢驗可枚舉(enumerable)的屬性。關於可枚舉性,參見下一章的《Object對象》一節。
      • 凡是定義在Object.prototype對像上面的屬性和方法,將被所有實例對象共享。
      • 如果你要在with語句內部,賦值對象某個屬性,這個屬性必須已經存在,否則你就是聲明了一個全局變量。with語句有很大的弊病,主要問題是綁定對像不明確。建議不要使用with語句,可以考慮用一個臨時變量代替with。

      一點感想:我還是不太喜歡for-in的寫法,雖然他較簡潔,但個人還是較偏好傳統的for loop寫法

      2.6 函數(function)
      • 函數表達式(Function Expression),採用函數表達式聲明函數時,function命令後面不帶有函數名。如果加上函數名,該函數名只在函數體內部有效,在函數體外部無效。
      • 需要注意的是,函數的表達式需要在語句的結尾加上分號,表示語句結束。而函數的聲明在結尾的大括號後面不用加分號。
      一點感想:讀這份資料真的滿累的,中途跑去讀英文資料JavaScript Functions-w3schools.com,原本只是想換換口味,沒想到意外的容易上手,也沒有提出一些容易出錯的寫法,頓時決定跟換學習主力改為W3Schools Online Web Tutorials,學習主力從中文改成英文,另外我決定要增強JavaScript、CSS、HTML的基本功,所以我決定去使用英文的coding網站Dash


      休息一下去又去查了一下SubLime的資料

      看資料時看到一個東西foo???
      • 查到的資料都怪怪的 QQ

      2014年9月20日 星期六

      2014/9/20 今日學習

      今天很晚才開始工作,現在要晚上了,依舊在搜尋如何上傳model在瀏覽器上coding,剛剛偶然看到這篇
      • Adding External Resources - CodePen Blog
        • CodePen allows you to link to CSS and JavaScript files anywhere on the web and run them in your Pen.You may also use other Pens as external resources.
        • 後來我嘗試把mrdoob那下載下來的knigjt.js複製到codepen上,但是無法儲存
        • 我放棄了,codepen與webstorm都放棄了,回去用webstorm

      想到一個問題,看mrdoob的code時,光只是人物擺動,我就有不少code,如果code無法模組化,那我要如何處理? 找到下面這網站,有提供GitHub,可以參考其中有場景與人物model的code是怎寫的
      另外找到一篇談如何用three.js寫game的
      重要問題,如何在Firefox上預覽

      遇到問題:sublime text2 output not utf-8
      快崩潰了,一直無法在sublime text2裡開啟有外部資源的檔案,經測試可以直接在chrome裡開啟原生的檔案






      2014年9月19日 星期五

      2014/9/19 今日學習

      local端的external model開不起來,後來改用FireFox開,mrdoob有提供教學
      如何開啟 about:config

      今日實作
      • mrdoob的knight在GitHub上的網址
      • 構想:codepen除非購買付費的pro feature,否則無法直接上傳js,所以我就想說改另一種方式,3D model轉成js檔後,從GitHub上去讀,這構想失敗了,CodePen的library必須要說明你要上傳lib,要說你就是library的作者或只是想上傳library
      • 放棄,改考慮JSBin
      JS Bin


      Code筆記
      • camera = new THREE.PerspectiveCamera(45, WIDTH/ HEIGHT, 0.1 , 20000);
      • #333f47
      • document
        • document對象-- JavaScript 標準參考教程(alpha)
        • DOM是文檔對像模型(Document Object Model)的簡稱,它的基本思想是把結構化文檔(比如HTML和XML)解析成一系列的節點,再由這些節點組成一個樹狀結構。
        • 簡易JavaScript語法結構
        • 「網頁瀏覽或執行,是開啟在瀏覽視窗(window)中,包含了一份或數份的HTML文件(document),文件中又包含了各種物件(object),每個物件都可以加以命名(name)或加上識別碼(id)。」
        • 常看到所謂DOM模式,就是指Document Object Model,或稱為「文件物件模式」,這是把HTML文件當作物件來操作

      2014年9月18日 星期四

      2014/9/18 今日學習

      今日目標:

      • 設置Github帳號
      • 在CodePen上寫three.js
      • 嘗試讓mrdoob的model動起來

      GitHub

      由於用CodePen的緣故,知道有CSS這玩意,上網估狗一下發現,可以使用Html5+CSS+javascript,結合jquery+PhoneGap來寫手機程式,而且入門門檻比用安卓來得低

      CSS
      剛剛回去看了一下挫折我許久的教學,他所下載下來的程式碼,結果發現,這教學是要我們去修改他的程式碼,難怪先前直接RUN都RUN不起來

      2014年9月17日 星期三

      2014/9/17 今日進度

      今日主力文章

      CodePen!?!?!?!?
      最近看了不少從網路上import js的做法,在此備份一下如何載入
      學習英文,很常在文章中看到把leverage 當作動詞用

      2014年9月16日 星期二

      2014/9/16 今日進度

      今日目標:實作WebWorker 

      昨晚有回來LAB弄一下東西,找到兩份WebWorker的資料,感覺都還不錯
      第二篇資料稍微瀏覽一下真的滿不錯的,早上訓練之前就決定讀這篇了
      • 使用 web workers - Web developer guide | MDN
        • 若是希望接受來自worker的通知,可以在worker的onmessage屬性上註冊一個適當的事件處理函數(event handler function)
        • 這篇的範例其實滿難讀的,暫停一下
      發現一個很多three.js經驗文的部落格
      找到一份資料,有談到Physi.js與WebWorker
      今天找到的關於three.js與動畫的教學

      發現 Learning Three.js: The JavaScript 3D Library for WebGL)這本書的範例連結
      今天想開從網路上載到我的硬碟裡mrdoob的example,發現卻開不起來,後來參考一篇資料

      WebGL With Three.js: Models and Animation - Tuts+ Code Tutorial 這篇時,看到 in 這用法不懂,於是找了下面這篇資料
      • in operator - JavaScript | MDN
      • 讀這篇才知道three.js一次只能讀取一個animation,不過這篇文章有提出workaround(解決辦法)
      •  THREE.SkinnedMesh, which supports animations.





      2014年9月15日 星期一

      2014/9/15 今日進度

      今天一進LAB看了兩篇文章

      今日目標:實作WebWorker  (未達成)
      連續幾天看了幾份資料,WebWorker最有用的兩份資料

      剛剛估狗時發現一份有趣的系列文章
      左手邊可以看到這系列文章的架構如下
      • WebGL
        • WebGL-based Three.js visualization
          • Basic 3D graphics using Three.js
          • The one-body problem
          • The two-body problem
          • The three-body problem
          • The physics and equations of the two- and three-body problem
        • 剛剛瀏覽The one-body problem (Windows)這篇文章時發現,可以透過
      另外又找到一份投影片資料,有提到一些遊戲操作元素的關鍵字

      2014年9月14日 星期日

      2014/9/13 今日進度

      在開始之前先來記錄一下昨天中午吃飯時讀到的一篇非技術文章

      昨天中午吃飯讀到,裡頭是在說免費的偏鄉教育課輔,然後有提到博幼教育基金會這非營利組織,滿有趣的,所已先備份一下,另外剛剛也稍微瀏覽一下教育替代役的網站,但沒詳細說明如何申請與資格為何,改天該親自打電話去詢問才對。

      瀏覽資料時在<JavaScript的標準參考教程(阿爾法)> 發現7.1節有提到WebSocket備份一下

      繼續瀏覽未讀完的WebWorker教學
      • The Basics of Web Workers - HTML5 Rocks
        • WebWorker的postMessage()這涵式他的本質是複製一份資料到worker上面,如果資料量太大的話就會有delay的情況發生,本文作者提出了其他篇文章沒看到的transfer object的概念來處理之
          • 在談transfer object時提到一個用詞「pass by reference」稍微估狗了一下還沒有很懂,只知道是C++裡提到的一種概念

      另外找了很久終於找到適當的addEventListener教學

      突然想到,我到現在依舊不懂JSON實際作為為何???
      javascript裡this的用法
      workerQueue???   taskQueue???    _this???


      • JavaScript 函式與 new 運算子  | 良葛格的 Blog
      • 面向對象編程概述-- JavaScript 標準參考教程(alpha)
        • 典型的面向對象編程語言(比如C++和Java),存在“類”(class)這樣一個概念。所謂“類”就是對象的模板,對象就是“類”的實例。JavaScript語言沒有“類”,而改用構造函數(constructor)作為對象的模板。
        • 構造函數的最大特點就是,函數體內部使用了this關鍵字,代表了所要生成的對象實例。生成對象的時候,必需用new命令,調用Vehicle函數。
        • 一個很自然的問題是,如果忘了使用new命令,直接調用構造函數會發生什麼事?
          • 這種情況下,構造函數就變成了普通函數,並不會生成實例對象。而且由於下面會說到的原因,this這時代表全局對象,將造成一些意想不到的結果。因此,應該避免出現不使用new命令、直接調用構造函數的情況。
        • 利用instanceof運算符,還可以巧妙地解決,調用構造函數時,忘了加new命令的問題。
      又找到一個three.js與WebWorker連結的範例,備份一下

      2014年9月12日 星期五

      2014/9/12 今日學習

      上午9:21開始reading


      今天休養生息

      想了解如何操作GitHub

      2014年9月11日 星期四

      2014/9/11 今日學習

      queuepool?

      jQuery

      DOM

      canvas→可把它想做HTML的畫布,我們可以在canvas上繪圖

      javascript裡有 Date???

      找到physijs的set up,透過下面這本電子書,第二個連結是GitHub的設定教學  

      今天看了先前找到操作three.js與Web Worker的資料,感覺第二篇資料比第一篇資料好讀多了

      Web Worker需要set up嗎???→ NO,可以直接調用請見Web worker的基本教學


      • 一些觀念紀錄
        • JavaScript允許省略var,直接對未聲明的變量賦值。也就是說,var a = 1 與a = 1,這兩條語句的效果相同。
        • 與大多數編程語言不一樣,JavaScript的區塊不構成單獨的作用域(scope)。也就是說,區塊中的變量與區塊外的變量,屬於同一個作用域。
        • ==相等
        • ===嚴格相等
        • 需要注意的是,switch語句後面的表達式與case語句後面的表示式,在比較運行結果時,採用的是嚴格相等運算符(===),而不是相等運算符(==),這意味著比較時不會發生類型轉換。
      • 進度:準備要讀CH2裡面的2.1節
      偶然想到:
      • 鍵盤滑鼠事件如何寫?
      • javascript裡的tr是???


      2014年9月10日 星期三

      2014/9/10 今日學習

      今天讀了昨天找到的幾篇Web Worker的資料

      於瀏覽器開啟下面兩篇three.js與WebWorker的實作,今天讀了第一篇,尚未全部讀完


      理解到自己對javascript的語法幾乎完全陌生,跟寫JAVA又不太一樣,最初讀WebWorker經驗分享(一)與(二)時就有遇到一些問題,讀程式碼時看到
      • javascript function(e){....}

      最早是在看PlayCanvas的API看到這樣的寫法,那時也不太懂,只寫過C、C++、JAVA沒看過如此寫法,裡面的e是什麼? 估狗一下後發現那個e是property of event object,e 是傳遞給event handler,參考資料如下
      第三份資料的jQuery只聽過名字,不知是什麼當下也還沒有去查

      稍微整理一下對今天讀資料後對Web Worker的理解
      讀資料時也常讀到DOM,估狗後略讀了幾篇無法快速理解那是什麼,找到一篇敘述我看得比較懂得,在此紀錄一下

      由於不知道console是什麼,於是估狗一下找到這篇解釋


      讀到一篇資料<轉貼"Javascript程式設計的核心 - Event">提到,但是快速瀏覽 <JavaScript 标准参考教程(alpha)>,2.4節的Object卻提到
      • object 是JavaScript的核心概念,也是最重要的數據類型。JavaScript的所有數據都可以被視為 object

      這滿有趣的,在此備份一下這作者阮一峰專門分類出來討論Object的3.1節

      今天也順便略讀了這網站的2.1節的概述,寫得真的很好,所已決定接下來幾天每天讀一點給自己加點基本知識

      到這裡也差不多有點基本概念,於是開始去讀three.js與Web Worker的實作
      讀到這篇範例的HTML檔時,仔細想想自己對HTML的標籤也不熟,於是估狗找到這篇資料

      讀HTML檔時看到 JQuery $(document) and $("#f3"),老實說一樣看不懂,估狗後找到這篇資料,才知道那是JQuery的寫法,略讀一下後發現用上JQuery可已精簡我們的程式碼,真的該花零碎時間研究一下

      讀HTML檔時看到<script type="text/javascript">,一樣不懂拿去估狗,發現有兩種不同的寫法,在此先備份,明天再研究

      2014年9月9日 星期二

      2014/9/9 [參考文獻] 網頁互動MMO遊戲:客戶端Multiplayer如何做?

      上周末放中秋連假之前,想到自己拿來做畢業題目的WebGL遊戲必須要做成MMO game。MMO的全名是 Massive Multiplayer Online,當初跟指導教授討論要做讓同學互動對戰的教育遊戲來作為畢業題目,從學Blender建模到現在,突然想到一個問題,我要如何實作「創建帳號」?

      最初曾考慮用PlayCanvas來開發,但是研讀了它的API後發現幾乎沒看到跟MMO game裡頭創建帳戶相關的資訊,於是開始搜尋其他資料。剛開始並沒想太多,想說應該跟寫資料庫SQL差不多吧,於是開始估狗發現我寫WebGL用的Three.js幾乎找不太到什麼資料庫相關的文獻,估狗各種關鍵字後發現可以用indexedDB與babylon.js來產生資料庫的連結,這幾天也稍微研究一下並同時繼續估狗,後來發現indexedDB並非同步性的,會有time delay的問題,參照下面投影片(出處)的p19、p20


      看到p20時說,"WebWorker is awesome." 這讓我好奇這是什麼東西,於是又繼續估狗。找到一篇中文的介紹,才知道javascript是單一執行緒的程式,如果把3D model與物理運算都在同一個執行緒上跑,想當然爾容易當掉,所以需要透過Web Worker另外開一個執行緒去跑其他運算,多看幾篇後知道有一個three.js的物理引擎plugin,Physijs就是透過Web Worker去調用

      Web Worker基本資料整理

      three.js與Web Worker實作範例
      花了一兩天拼命估狗,知道可以透過實作Web Worker開另一條執行緒來寫javascript進行物理運算,但是依舊沒有解決我的問題:實作MMO game該如何創建玩家的帳號。

      今天又花了一整天找資料也沒什麼頭緒,回去看剛剛上面找到的那個投影片TDC 2013 - WebGL & WebSockets for 3D Multi-Platform Multiplayer Gaming投影片的p9有一串網址,打入那網址可連到這網頁,當初我選了Phone War,稍微玩了一下,確定可以透過WebGL實作multiplayer

      再回去看投影片,看到p11的標題 WebSocket,然後估狗WebGL+WebSocket找到下面這篇文章
      我終於找到我需要的元素了,透過Node.js與Socket.IO來實作,就可達成MMO game的多個帳號同時連線遊玩的效果

      Node.js

      知道自己需要的材料大致有哪些後,心情終於比較踏實了