Chromatic Coder

Because of the presence of Pokémon Go, lots of people start to discuss the possibility of AR (augmented reality) on the Web. Thanks for Jerome Etienne's slides , it brings me some idea to make this AR demo. First of all, it is based on  three.js and js-aruco . three.js is a WebGL framework that helps us construct and load 3D models. js-aruco is Javascript version of ArUco that is a minimal library for Augmented Reality applications based on OpenCV. These two project make it is possible to implement a Web AR proof of concept. Then, I would like to introduce how to implement this demo. First, we need to use  navigator .getUserMedia to give us the video stream from our webcam. This function is not supported on all browser vendors. Please take a look at the status. http://caniuse.com/#feat=stream navigator.getUserMedia = ( navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || ...

A-Frame is a WebVR framework for developers to make their VR content rapidly. It is based on Entity-Component system. So, it could bring us flexibility and usability for developing. This is my slide for the sharing in WebGL Meetup Taipei #03. Introduction to A-Frame from Daosheng Mu

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

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

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/

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

The article introduces how to use ThreeJS to make a WebGL game which works well on desktop browsers and Android-Chrome. Some optimization approach we can refer!! This is so great, and this approach also could bring nice performance on 3D rendering engine. Use low-poly models Use low-res textures Reduce the number of drawcalls as much as possible by merging geometry Simplify materials and lighting Remove post effects and turn off antialiasing Optimise Javascript performance Render the WebGL canvas at half size and scale up with CSS Reference: http://www.html5rocks.com/en/tutorials/casestudies/hobbit/ http://middle-earth.thehobbit.com/trollshaw/experience

http://jqmdesigner.appspot.com/designer.html

https://hacks.mozilla.org/2013/11/live-editing-webgl-shaders-with-firefox-developer-tools/

IvanK Lib is JavaScript library for 2D and 3D graphics, inspired by Flash , so it is familiar to flash developers. http://lib.ivank.net/ COLLADA to glTF: COLLADA binary format, and will be native supported by WebGL. ( 這篇簡報主要介紹 glTF: 它是 Khronos 組織所制定的 COLLADA binary format 。他們點出了現在的 3D format 越來越注重兩個重點 --- Compression and streaming 。主要是因為 WebGL 的誕生， 3D 檔案被要求越快能夠帶到使用者的面前是最重要的。然後 glTF 將會原生被 GL API 所支持。 ) https://www.khronos.org/assets/uploads/developers/library/2013-siggraph-collada-bof/COLLADA-BOF_SIGGRAPH-2013.pdf WebGL on Siggraph2013 http://developer.amd.com/community/blog/webgl-craze-at-siggraph-2013/ Holistic WebGL http://blog.tojicode.com/2013/08/holistic-webgl.html Html5 game engines http://techslides.com/html5-game-engines-and-frameworks/

Convert to Json https://github.com/mrdoob/three.js/tree/master/utils/converters/fbx Download the FBX python binding from here: http://usa.autodesk.com/adsk/servlet/pc/item?siteID=123112&id=10775847    Install Python 2.6 after Install FBX Python binding In command line: convert_to_threejs.py srcfile  destfile [option] I recommend use [option] = -x, while you fail because of the textures from model, else pass the [option] Debug Node.js Use node-inspector, https://github.com/dannycoates/node-inspector Install: npm install -g node-inspector Debug: node --debug server.js node-inspector open http://127.0.0.1:8080/debug?port=5858 in your favorite WebKit based browser Node.js Post Get Debug JavaScript NetBeans supports code complete, highlight error/warning immediately. If you want to debug on browsers, you can use NetBeans Connector, but it would slow your pipeline, due to NetBeans Connector has to wait Chrome connection and receives response data from Chrome...

http://www.iguanademos.com/Jare/wp/?p=2663 值得注意的是這次有三場都在講 WebGL: COLLADA to WebGL , Turbulenz   Multiplatform C++ on the Web with Emscripten , IMVU   Compiling C++ to JavaScript , Mozilla   大致結論是， Emscripten 還是沒有比直接 JavaScript 來的快，大概會有兩倍差距，但是如果使用 asm.js 則會加快 CPU 計算的部分，可以超過直接 JavaScript 。