PlayCanvas WebGL 3rd Person Multiplayer Demo

-
D.E.M.O. screenshot

       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

Comments

Post a Comment

Popular posts from this blog

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 influe
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
Read more

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 this texCoord to fetch pixels from a texture, sampler : 1.  float4 color = tex2D( sampler,  float2( texX / texW, texY/texW ); 2.  float4 color = tex2Dporj( sampler, float4( texX, texY, texZ, texW ) ); The above 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