From Console to Chrome

-
Console to chrome

Ubiquitous code, not for every browser or device
Webgl:opengles2.0 shader model
No depth buffer access, limited tex compression . Read pixel get(), glfinish are extra expensive
Webaudio chrome only.graph based

JavaScript type less, jit compiler, single thread， gc. Robust, lawless.

Code standard for sanity
Defensive coding: layer complexity
But... Easy to write slow code, small change big cinquecento.

Jit objectModel optCompiler GC

Jit: parse js, fast to compile
Small int,fast. 31bits on 32 machine, 32 on x64
64bit heap numbers: slightly slow
Arrays: typedArrays : memory efficient
JsARray: allow not possible in C
Var a = [1000] not a=[] is a good way.

Hidden classes: internal type system. Expensive first time, cheap after. Try to create all properties!!

Hash table is dicionary mode: too many properties

Optimizer compiler:
Warm up on full gerenal path. Profiler for hot function, inclining, licm, gvn. Bailout try to optimize but quit.
Dept: trace all possible???

Static and like c performance
Reduce properties

Garage collection
Promotion is expensive, release your reference avoid gc stalls, return value also generate object.

Browser capabilities, local hw vary
Micro benchmark, test loading, test data in update

About gpu
Don't spill the buffer(flush), limit upload size per frame. Share buffer.
Drivers. Test by creating context
Angle: directX9 on windows
Swiftshader: software rasterizer
Render loop: setinterval, settimeout, requestanimationframe(RAF)- try to call at 60hz, adapt to load

Game loop

Composite(Vsync)
RAF vs user input: buffer your inputs , handle in raf

Budget 2-4frame for chrome
Queue inputs to handle in raf

Chrome developer tool:
Timeline, CPU, heap profiler
ideAbout:tracing

IDE: Webgl inspector: http://benvanik.github.com/WebGL-Inspector/

Download the powerpoint and watch the video


Comments

Post a Comment

Popular posts from this blog

Drawing textured cube with Vulkan on Android

-
Image
Vulkan is a modern hardware-accelerated Graphics API. Its goal is providing an high efficient way in low-level graphics and compute on modern GPUs for PC, mobile, and embedded devices. I am personally working a self training project, vulkan-android , to teach myself how to use this new APIs. The difference between OpenGL and Vulkan OpenGL: Higher level API in comparison with Vulkan, and the next generation of OpenGL 4 will be Vulkan.   Cross-platform and Cross-language (mostly still based on C/C++, but people implemented diverse versions and expose similar API binding based on OpenGL C++, WebGL is a good example).  Mainly used in 3D graphics and 2D image processing to interact with GPU in order to achieve hardware acceleration. Don't have a command buffer can be manipulated at the application side. That means we will be easily see draw calls being the performance bottleneck in a big and complex 3D scene. Vulkan: Cross-platform and low-overhead. Erase the boundary bet...
Read more

glTF loader for Android Vulkan

-
Image
This post is going to introduce how we integrate with an existing glTF loader library to make it be able to show glTF models in our Vulkan rendering framework,  vulkan-android . tinygltf In the beginning, we don't want to make our new own wheel, so choosing  tinygltf as our glTF loader. tinygltf is a C++11 based library that would help us support all possible cross-platform project easily. tinygltf setup in Android Studio In  vulkan-android  project, we put third party libraries into third_party folder. Therefore, we need to include tinygltf from third_party folder in app/CMakeLists.txt as below. set(THIRD_PARTY_DIR ../../third_party) include_directories(${THIRD_PARTY_DIR}/tinygltf) Model loading from tinygltf We are going to load a gltf ASCII or binary format model from the storage. tinygltf provides two APIs , they are LoadBinaryFromFile() and LoadASCIIFromFile() respectively based on the extension name is *.glb or *.gltf. TinyGLTF loader will return a tiny...
Read more

C++ unit testing & CI integration in GitHub (I/2)

-
Image
I am working on a side project,  Vulkan-Android , that is based on Java, JNI, C++, and Vulkan for Android platform. It also uses my C++ math library. Therefore, the requirement of my build and unit tests are around C++. First of all, I would make sure the unit tests in local are run properly. C++ unit test on Mac OS On Mac OS, I think the most convenient way to do unit testing for C++ is writing XCT in Xcode. In the beginning, we need to create a test plan in Xcode. It will helps us create a schema, then, in the test navigator, create a new Unit Test Target. Due to XCT was originally designed for Objective-C or Swift, if we wanna test our C++ code, we need a workaround by making the file extension name to be *.mm . And then, write down the unit tests as below: #import <XCTest/XCTest.h> #include "Vector3d.h" using namespace gfx_math; @interface testVector3D : XCTestCase @end @implementation testVector3D - (void)setUp { // Put setup code here. This method is cal...
Read more