Chromatic Coder

http://coherent-labs.com/blog/what-developers-should-consider-when-using-chromium-embedded-framework-cef-in-their-games/ http://www.ogre3d.org/forums/viewtopic.php?f=11&t=79079

   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 = imagedata.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 - ...

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: http://dev.arca3d.com

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 pa...

Link: http://dsmu.me/sponza/sponza.html 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 target Post-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 De...

30+ Cross Platform Mobile App and Game Development Tools http://www.riaxe.com/blog/top-cross-platform-mobile-development-tools/?fb_action_ids=10201601507067999&fb_action_types=og.comments&fb_source=other_multiline&action_object_map=[233188210202347]&action_type_map=[%22og.comments%22]&action_ref_map=[]

Debugging on mobile devices always has to back on your desktop devices, just like Android chrome debugging. ( http://coderellis.blogspot.tw/2013/04/porting-html5-game-to-mobile-platform.html ) 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 you...

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 ...

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 // F...

簡介 Wordpress網頁會用到的資料只有兩大區塊，一個為Wordpress安裝檔另一個為MySQL資料庫 Wordpress備份 直接將www目錄下的Wordpress檔案抓下來，裡面絕大部分都是Wordpress的系統檔，只有wp-content下的資料是網站資料．為了將整體環境一致最好還是都一次拷貝下來，未來如果需要升級也是直接取代新的Wordpress目錄就可以，不過保險起見wp-content目錄以及wp-config.php要先留備份． MySQL備份 使用MySQL輸出database指令，將Wordpress所用到的database輸出．使用下列指令： mysqldump -u ellis -p wordpress > xxx.sql 以上列指令為例，是在使用MySQL中的ellis帳號，並且需要密碼驗證，來將wordpress這個database輸出到xxx.sql檔案． 整合安裝 首先，將要被移往的主機安裝好Wordpress環境，包含了Apache, MySQL, PHP．接著在MySQL創建一個database(以此說明文件為例我們用wordpress當作database名稱)．匯入我們先前匯出的xxx.sql． 接著，將之前主機抓下來Wordpress檔案取代到現在的Wordpress目錄．最後打開wp-cofig.php調整現在的設定，主要檢查這幾個欄位: // ** 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 ...

2013年發生了很多事，我們自己的團隊大家宣布要休息一陣子，大家生活的重心從創業移轉到家庭以及未來的工作上了，可能是這次的開發讓大家都累了。也嘗試接一下案子來做，了解自己在談判能力的不足，有時候會給對方帶來期待，但其實自己的技術和伙伴的投入度並沒有到達水準。還是應該在初期就問問自己的初心是不是真的喜歡這個案子，如果不喜歡還是應該即時回絕，避免傷害到客戶的情誼。 之後我就開始繼續研究我有興趣的HTML5，從做出一個簡單的遊戲到開始能夠跟社群的人互動，了解到動機能夠幫助我們學習到很多東西。 2013年我結婚了，我實在沒想到我會這麼快結婚，其實很多事情都還沒做，一出社會就一直跟同學誏誏我錢存夠了我就要出國念書，結果國防役四年下來存的比我想像中還要少，只夠我出國念一年...也發現我最愛的電腦科學碩士會排斥已經有過國內碩士的學生...一切都不如我以前規劃那樣，這才發現在成長過程中能夠給我良性建議的人實在太少。 今年已經是我第三次做3D引擎了，只要跟我說要做，我其實大概都知道要怎麼做要多少時間，風險已經都會降到10%左右。但是要做的時候難免會想這次我做好了，我會因為這個成就甚麼嗎? 第一套引擎算是我的學習試驗品，但做完沒有人要用，就連想要做商業化宣傳也被老闆直接砍掉。第二套算是一個很有商業化的引擎，公司之前超過一半的專案都在用，但我們也害了很多人趕案子加班，逼了很多人離職，它其實是一個凶器。 第二套引擎的開發讓我開始在國外技術社群認識了很多有野心的團隊，他們是以團隊方式在做技術開發，有一個很強力的leader，團隊規模不會超過十人，但做得很有成就感。再看看我自己，我雖然已經可以跟他們leader討論重要的關鍵議題，也被認為很專業，但我自己語言能力還是沒辦法問得很詳細，再來也一直深耕一個念頭，為什麼我需要在大公司做這樣小團隊就能做到的事，反而會因為大公司的決策速度導致在市場面進展的緩慢，我們東西明明不錯，但社群的人就是不認識我們...  第三套引擎做起來我已經有點像是機器人在做了，看到我最想競爭的Minko還是這麼的有野心，我曾經嘗試要跟他們一樣做出最棒的產品，但我的動力真的不足，做完我也大概知道它可能會比凶器好一點，因為可能會沒人用。而且他其實並不會幫我們改善周遭的生活，因為它的願景存在是有點模糊。 所以我離職了，離開了待了快六年的公司，曾經有人說公...

asm.js 有多快? 此文章整理了一連串的效能評比，asm.js對於我們帶來了可期待的效能，但並不是所有情形都能夠比native javascript快，甚至使用asm.js/Emscripten來處理我們的game engine會造成debugging以及與WebGL銜接上的麻煩，在設計前請多加考慮。 http://arstechnica.com/information-technology/2013/05/native-level-performance-on-the-web-a-brief-examination-of-asm-js/

下列文章分析ARM Mali, PowerVR, Adreno等mobile GPU廠商的架構，會提到graphics pipepline對於mobile devices的演進，以及各家廠商為了節能及提高效能上所做的努力。 Reference: http://www.igao7.com/1217-vv-gpu.html http://www.igao7.com/1218-vv-gpu.html

Goo Engine and Goo Create http://www.gootechnologies.com/

我將介紹如何撰寫一個JQuery的WordPress plugin 首先在%WordPressRoot%/wp-content/plugins下建立一個你plugin名稱的資料夾，這個名稱儘量獨特一點，避免之後跟WordPress plugin store上的套件撞名，ex: ellis123456．接著再產生一個跟資料夾名稱一樣的php檔案，ellis123456.php． 首先加上描述，說明版本與作者資訊．此定義內容會存在WordPress的plugin簡介，請勿務必填寫完整 /** * 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' ); 定義完成後，我們就可以開始載入JQuery函式庫， 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', ...

MAMP是一個可以在Mac本機上直接安裝設定Apache, MySQL, PHP的好用軟體．(Windows版本為WAMP)． 1. 他十分簡單，首先去MAMP下載安裝檔( http://www.mamp.info/en/index.html )．他有分為一般版本及Pro版，Pro版需要付錢，因此我們使用一般版本來說明． 安裝完後的界面如下： 安裝完成後，使用瀏覽器觀看我們的首頁會在port:8888 2. 接下來我們要安裝WordPress 在安裝WordPress之前記得要先設定一組db帳號在MySQL，設定步驟如下： 在Terminal視窗輸入：/Applications/MAMP/Library/bin/mysql --host=localhost -uroot -proot ( http://documentation.mamp.info/en/mamp/how-tos/using-mysql-command-line ) 接著觀察目前的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了 去WordPress首頁下載zip檔( http://wordpress.org/download/ )．解壓縮後丟到/Applications/MAMP/htdocs/，接著在瀏覽器執行http://localhost:8888/wordpress/就會進入我們的設定頁 最後你的WordPress在Mac本機端的架設就完成了～～～...