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

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


張貼者： 於 沒有留言:
標籤： ,
訂閱： 文章 (Atom)