Showing posts from 2014

Using Chromium Embedded Framework (CEF) in their games

Web3D using software rendering

Nowadays, if people would like to implement a Web3D demo, most of them would use WebGL approach.

WebGL seems to be the spec of Web3D,  because Chrome, Firefox, Safari, IE, and Android Chrome have supported it. iOS 8 will be launched this year, and WebGL also can be executed on iOS 8 Safari.

In order to support iOS 7 pervious version for Web3D, I survey the Software Renderer method of three.js and help them add texture mapping and pixel lighting.

First, we get the image data from canvas.
var context = canvas.getContext( '2d', { alpha: parameters.alpha === true } ); imagedata = context.getImageData( 0, 0, canvasWidth, canvasHeight ); data =;

Second, we have to project the faces of objects to the screen space, we needn't sort them by painter algorithm, because three.js has implemented a screen size z buffer to store the depth values for depth testing.

And then, start to interpolate the pixels of these faces.
var dz12 = z1 - z2, dz31 = z3 - z…

Printing your 3D models by using Arca3D

Arca3D is a platform can let you store your 3D models. There is a more interesting thing, it also can help you print your models.

 First, select a model you uploaded.

Next, click the button, Download STL File

Then, you can check it through STL viewer

Finally, pick the *.stl file to your 3D printer and get your great physical 3D model.

Enjoy it:

Arca3D LCD

Arca3D model

JavaScript singleton pattern

In JavaScript,  it would let you feel struggle to implement singleton design pattern. This is my first experiment:
View = { _viewer: undefined, initView: function() { // init view }, getView: function() { // get view return _viewer; } }; But I figure out this approach can't express 'encapsulate', so the user can get _viewer directly. Therefore, I decide to rewrite it. I rewrite it to:
var View = ( function() { var _viewer = undefined; function init() { // init view }; function getView() { // get view return _viewer; }; return { init(): { init(); }, getView(): { return getView(); } }; }; } ) (); This method can achieve 'encapsulate', uses its method like View.getView(), but you have to program the interface two times on function and return parts…

Screen Space Ambient Occulsion demo


This demo supports Desktop Web browsers and Android Chrome. It is based on three.js framework. and the scene assets are downloaded from Crytek Sponza. In order to increase the loading time I suggest to use three.js's binary format that is converted from convert_obj_three tool. In my experience, it could save about 80% loading time, and the file size is just about a half size. In this SSAO demo, it uses two render targets and three passes:
Depth pass: Storing the log depth and pack it into the RGBA render target texture.Diffuse pass: Storing diffuse value which has computed the lighting value into a RGB render targetPost-Processing pass: Unpacking the log depth value from depth pass texture and linearize it, and then fetching the diffuse value from diffuse render target. Finally, computing the ssao using Spiral sampling approach and multiply with the diffuse value. Snapshots: Desktop web browser & Android Chrome
Desktop web browser

30+ Cross Platform Mobile App and Game Development Tools


Using remote debugging for HTML5 on iOS

Debugging on mobile devices always has to back on your desktop devices, just like Android chrome debugging. (

This article I would like to describe the approach by using web-inspector, its advantage is native supported by Apple, we needn't install any plugin. However, its disadvantage is you must have a Mac system devices, because it requires to use Safari version 6 later, and Windows' Safari' version is only available to version 5.1.7.

1. Enable web inspector
Go to your iOS device setting page. Enable the web inspector in the Safari->Advance. And then, connect your iOS device using USB connector to your Mac device.

2. Enable developer mode on Safari
Go to the Safari of your Mac, open the Setting->Advance, check the the enable developer menu.
Using the iOS device to open the web page you wanna debug. Then, go to Menu->Developer on your Safari of Mac, you could see your iOS device. Clic…

WebGL Demo 02: 3D model loader and preview

When you want to display a complex 3D mesh in your 3D application, you must want to find an external model format for you to use. They would be COLLADA(.dae), FBX(.fbx), or OBJ(.obj). However, If you want to make a 3D engine, you must want to support more kinds of formats. Therefore, I start to research FBX SDK.

FBX SDK supports .fbx, .dxf, .dae, and .obj file formats' importer/exporter, and .3ds format has been retired. FBX technology can be used to sharing scene assets, storing, packing models for sale, and processing animation, it supports import/export functions in Autodesk's products(3ds Max, Maya, AutoCAD...). The FBX SDK is a part of Autodesk FBX technology, it is C++ Software Development Kit. You can use it to create plug-ins, converters, and other applications. FBX SDK's source code is not public opening, therefore, we just can use their SDK interface, and if you want to redistribute or repacked, you should write permission from Autodesk, and include a link to the…

WebGL Demo 01: 3D transformation and Lambert lighting

This demo would talk about some 3D computer graphics background knowledge, and to show how to use WebGL to do 3D transformation and Lambert lighting.

Using maximus.js, author by Ellis Mu

     In this demo, I develop a WebGL framework named maximus.js to proof the functions which been implemented by three.js. I choose the same 3d coordinate system as three.js, which is Y-up and right-hand system.

1. Vertex buffer
     In the 3d graphics pipeline, the data format of primitive which GPU can accept, They are vertex buffer and index buffer.

What is vertex buffer? Each primitive must be constructed by vertices. In the case of cube, we create a mesh which has 24 vertices, because it has six faces and per face has four vertices.
_cubeVertexBuffer = gl.createBuffer(); // create a buffer gl.bindBuffer( gl.ARRAY_BUFFER, _cubeVertexBuffer ); // bind this buffer as vertex buffer var vertices = [ // Create these vertices // Front face -1.0, -1.0, 1.0, 1.0, 0.0, 0…

Move your Wordpress website

mysqldump -u ellis -p wordpress > xxx.sql 以上列指令為例,是在使用MySQL中的ellis帳號,並且需要密碼驗證,來將wordpress這個database輸出到xxx.sql檔案.整合安裝
首先,將要被移往的主機安裝好Wordpress環境,包含了Apache, MySQL, PHP.接著在MySQL創建一個database(以此說明文件為例我們用wordpress當作database名稱).匯入我們先前匯出的xxx.sql.
// ** MySQL settings - You can get this info from your web host ** // /** The name of the database for WordPress */ define('DB_NAME', 'wordpress');  /**資料庫的名稱?*/ /** MySQL database username */ define('DB_USER', 'ellis');   /**登入MySQL後台的使用者帳號*/ /** MySQL database password */ define('DB_PASSWORD', 'xxxxxxx');  /**使用者的密碼*/ /** MySQL hostname */ define('…





今年已經是我第三次做3D引擎了,只要跟我說要做,我其實大概都知道要怎麼做要多少時間,風險已經都會降到10%左右。但是要做的時候難免會想這次我做好了,我會因為這個成就甚麼嗎? 第一套引擎算是我的學習試驗品,但做完沒有人要用,就連想要做商業化宣傳也被老闆直接砍掉。第二套算是一個很有商業化的引擎,公司之前超過一半的專案都在用,但我們也害了很多人趕案子加班,逼了很多人離職,它其實是一個凶器。 第二套引擎的開發讓我開始在國外技術社群認識了很多有野心的團隊,他們是以團隊方式在做技術開發,有一個很強力的leader,團隊規模不會超過十人,但做得很有成就感。再看看我自己,我雖然已經可以跟他們leader討論重要的關鍵議題,也被認為很專業,但我自己語言能力還是沒辦法問得很詳細,再來也一直深耕一個念頭,為什麼我需要在大公司做這樣小團隊就能做到的事,反而會因為大公司的決策速度導致在市場面進展的緩慢,我們東西明明不錯,但社群的人就是不認識我們...



Mozilla can produce near-native performance on the Web

asm.js 有多快?

此文章整理了一連串的效能評比,asm.js對於我們帶來了可期待的效能,但並不是所有情形都能夠比native javascript快,甚至使用asm.js/Emscripten來處理我們的game engine會造成debugging以及與WebGL銜接上的麻煩,在設計前請多加考慮。


下列文章分析ARM Mali, PowerVR, Adreno等mobile GPU廠商的架構,會提到graphics pipepline對於mobile devices的演進,以及各家廠商為了節能及提高效能上所做的努力。


HTML5DevConf: Kruger, Marcus, "Launching Goo Create - WebGL graphics made easy"

Goo Engine and Goo Create

Write your own WordPress plugin

我將介紹如何撰寫一個JQuery的WordPress plugin

首先在%WordPressRoot%/wp-content/plugins下建立一個你plugin名稱的資料夾,這個名稱儘量獨特一點,避免之後跟WordPress plugin store上的套件撞名,ex: ellis123456.接著再產生一個跟資料夾名稱一樣的php檔案,ellis123456.php.

/** * Plugin Name: ellisJQuery * Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates * Description: Ellis's specific version of JQuery for WordPress. * Version: 0.0.003 * Author: Ellis Mu * Author URI: http://URI_Of_The_Plugin_Author * License: GPL2 */ 定義plugin的unique id以及需要多國語言時它的目錄
load_plugin_textdomain('ellis123456', false, basename( dirname( __FILE__ ) ) . '/languages' );
function initJQuery() { wp_register_style( 'jquery', plugins_url('style/eggplant/jquery-ui-1.10.4.custom.min.css', __FILE__) ); wp_enqueue_style( 'jquery' ); /* * We should load jquery before load jquery ui. */ wp_register_script( 'jquery', 'js/jquery…

Using MAMP to install WordPress

MAMP是一個可以在Mac本機上直接安裝設定Apache, MySQL, PHP的好用軟體.(Windows版本為WAMP).

1. 他十分簡單,首先去MAMP下載安裝檔(他有分為一般版本及Pro版,Pro版需要付錢,因此我們使用一般版本來說明.



2. 接下來我們要安裝WordPress 在安裝WordPress之前記得要先設定一組db帳號在MySQL,設定步驟如下:
在Terminal視窗輸入:/Applications/MAMP/Library/bin/mysql --host=localhost -uroot -proot
(接著觀察目前的db---  show databases;創建一組新的db--- CREATE DATABASE wordpress;創建你的使用者帳號--- CREATE USER ellis@localhost;建立使用者密碼--- SET PASSWORD FOR ellis@localhost= PASSWORD("xxxxxxxxx");綁定帳號與db--- GRANT ALL PRIVILEGES ON wordpress.* TO ellis@localhost IDENTIFIED BY 'xxxxxxxxx';刷新 FLUSH PRIVILEGES;離開 exit 3. 最後我們就可以安裝我們的WordPress了