Introduction to A-Frame

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.

Comments

Post a Comment

Popular posts from this blog

tex2D vs. tex2Dproj

texCoord(  texX, texY, texZ , texW ) means texture coordinate after transforming from the texture matrix [ position goes through world, view, projection, and texture ].


We can use texCoord to fetch texture:
1.  float4 color = tex2D( sampler,  float2( texX / texW, texY/texW );
2.  float4 color = tex2Dporj( sampler, float4( texX, texY, texZ, texW ) );

The top-two methods will have the same result. Because tex2Dproj operator supports divide w in its interface.


http://www.gamedev.net/community/forums/topic.asp?topic_id=408894
http://bbs.gameres.com/showthread.asp?threadid=104316
Read more

Fast subsurface scattering

Image
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 diffuse value influence according the vary…
Read more

Physically-Based Rendering in WebGL

Image
According to the image from Physically Based Shading At Disney as below, the left is the real chrome, the middle is PBR approach, and the right is Blinn-Phong. We can find PBR is more closer to the real case, and the difference part is the specular lighting part.


Blinn-Phong

The most important part of specular term in Blinn-Phong is it uses half-vector instead of using dot(lightDir, normalDir) to avoid the traditional Phong lighting model hard shape problem.

vec3 BRDF_Specular_BlinnPhong( vec3 lightDir, vec3 viewDir, vec3 normal, vec3 specularColor, float shininess ) { vec3 halfDir = normalize( lightDir + viewDir ); float dotNH = saturate( dot( normal, halfDir ) ); float dotLH = saturate( dot( lightDir, halfDir ) ); vec3 F = F_Schlick( specularColor, dotLH ); float G = G_BlinnPhong_Implicit( ); float D = D_BlinnPhong( shininess, dotNH ); return F * ( G * D ); }
Physically-Based rendering

 Regarding to the lighting model of GGX, UE4 Shading presentation by Brian Karis, it ta…
Read more