Chromatic Coder

Fig.1 - Fast Subsurface scattering of Stanford Bunny Based on the implementation of three.js . It provides a cheap, fast, and convincing approach to do ray-tracing in translucent surfaces. It refers the sharing in GDC 2011  [1], and the approach is used by Frostbite 2 and Unity engines [1][2][3]. Traditionally, when a ray intersects with surfaces, it needs to calculate the bouncing result after intersections. Materials can be divided into three types roughly.  Opaque , lights can't go through its geometry and the ray will be bounced back.  Transparency , the ray passes and allow it through the surface totally, it probably would loose a little energy after leaving.  Translucency , the ray after entering the surface will be bounced internally like below Fig. 2. Fig.2 - BSSRDF [1] In the case of translucency, we have several subsurface scattering approaches to solve our problem. When a light is traveling inside the shape, that needs to consider the ...

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

We all know VR is a very popular stuff currently. There are lots of big companies start to develop their own headsets. Facebook and Youtube begin to support 360 degree videos on their platforms. Due to their works, we could expect there would be huge amounts of applications that target to Virtual Reality in the next couple of years. Currently, if you want to play VR content, you have to spend about $300 USD to buy a headset and plug several wires into your desktop. I think it would increase the wall to invite users to use VR. On the other hand, Google and Gear VR choose to use mobile devices as their headsets. You just need to spend $20 USD to buy a Google Cardboard and can start to enjoy the interaction with VR content. How about the content part of VR applications? If you want to write an application for Oculus, you must write Windows version for Windows users, or MacOS version for MacOS users. On mobile devices, you also need to rewrite apps for Android and iOS versions. No one ...

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

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

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

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

WebGL has been occupied about 67% users' devices. Now, it is a big chance to do some innovative works on it. http://webglstats.com/ http://codeflow.org/entries/2013/feb/22/how-to-write-portable-webgl/

Deploying C++ to JavaScript using Emscripten: http://www.joshuagranick.com/blog/2013/04/21/deploying-cpp-to-javascript-using-emscripten/ This article also talks about using Emscripten from Visual Studio 2010 , we can use VS IDE to integrate with llvm-clang and emscripten toolchain. Unreal JavaScript: http://blog.bitops.com/blog/2013/05/01/unreal-javascript/

1.   Protected mode 的源起 為了避免 Flash Player 在執行時存取到敏感的資源，並防止攻擊者觸發一些 bug 傷害系統。故讓 Flash Player 在受限制的低授權 (integrity) 環境下運行，該系統先被實作於 Adobe Reader X sandbox 中。 ( http://blogs.adobe.com/asset/2010/10/inside-adobe-reader-protected-mode-part-1-design.html ) 可以使用一些 process 監控軟體，可以發現 : 當 Flash player 執行在 Firefox 時，會發現有三個 process 在運行。 “plugin-container.exe.” Firefox 的 plugins 接口，當 Firefox 運行 plugins 時會使用此獨立的 process 來執行。   FlashPlayerPlugin – Medium Integrity Broker process ，用來當作 sandbox 版本的中間版本， sandbox 可以在此 broker process 完整運行它的內容。此架構對於 Broker process 留有彈性，未來也能調整 broker process 功能上的限制。     FlashPlayerPlugin – Low Integrity   針對需要被限制的功能就會將之隔絕，主要是運作 Flash player engine 與 Web content 的呈現。 2. 限制的方式 此 sandbox 的功能被運行於 Windows Vista/Windows 7 作業系統。 Low integrity 可以防止存取到寫入到使用者的 profile 或是 registry( 這些需要 medium integrity 權限 ) ， 將 Security Identifiers (SIDs) 的條件設置更嚴格，關閉繼承於 group 的 permission 。 Job restriction ， restricting access to USER Han...

Stage3D conference的演講資料。之後會有offline課程可以觀看。 Minko: http://blogs.aerys.in/jeanmarc-leroux/2013/02/22/stage3d-online-conference-slides/ Away3D: http://infiniteturtles.co.uk/presentations/Cross_Platform_3D_to_the_Max/Crossplatform_3D_to_the_Max_1024x768_Stage3DConf.pdf Flare3D: https://dl.dropbox.com/u/12986030/flare3d/stage3d_conf.ppt Zest3D: https://docs.google.com/presentation/d/1BPpvN5KGWaQJoLb-KcgesX_jtd4jrENPRP6HvbkhLtg/pub?start=false&loop=false&delayms=60000#slide=id.p M3D: http://www.youtube.com/watch?v=bjTrRCJdXBY 巧的是Minko, Away3D, Flare3D通通都拿Crytek的場景資料來做tech demo。

Components of Flash Player   http://www.adobe.com/devnet/scout/articles/understanding-flashplayer-with-scout.html

Adobe: Changing the game from Flash GAMM! Stage3D: Extended mode: not on mobile device/only on desktop Baseline mode Constrained mode: in order to support some integrated chip desktop, and remove some features ATF will work for 2D

Earlier versions of FlashPlayer 11 support hardware rendering for devices manufactured after 2008. The constrained mode extends this support to all devices released since 2005.   How does it work? In order to make your application work in constrained mode you just should set the second parameter of stage3D.requestContext3D() when requesting the context, in the following way: stage3D.requestContext3D(Context3DRenderMode.AUTO, Context3DProfile.BASELINE_CONSTRAINED); T argeted at devices that only support PS_2.0 level shaders like the Intel GMA 9xx series . You are limited to 64 ALU and 32 texture instructions per shader. Only four texture read instructions per shader. No support for predicate register. This affects sln/sge/seq/sne, which you replace with compound mov/cmp instructions, available with ps_2_0. The Context3D back buffer must always be within the bounds of the stage. Only one instance of a Context3D running in Constrained pro...

http://asmallgame.com/labsopen/webgl_impact/ Using three.js to render a game made with impactJS and box2D

       WebGL再度做出驚人的表現，PlayCanvas的人員花了 兩個禮拜製作。這個demo與以前不一樣的是做到了multiplayer，支援mouse lock, full screen，在Chrome還支援gamepad。Chrome真的是一個很適合發展HTML5的平台。對於有1.3 billion的潛在玩家，並且相較於triple-A專案的開發成本低的HTML5 platform，能不趁早涉入嗎? Source code: https://bitbucket.org/playcanvas/scifi Reference: http://playcanvas.com/a-multiplayer-3rd-person-shooter-in-html5/ http://www.html5gamedevelopment.org/html5-demos/2012-08-playcanvas-webgl-3rd-person-multiplayer-demo?utm_source=twitterfeed&utm_medium=facebook