WebGL in Beta in Google Chrome



WebGL demo: Field
WebGL demo – Field


WebGL is now in beta stage in Chrome, Google’s browser. You can download a beta version of Chrome tha supports WebGL HERE.

WebGL is a 3D graphics API for JavaScript that developers can use to create fully 3D web apps. It is based on the OpenGL ES 2.0 API, which should be familiar to many 3D graphics developers ( yes ;) ). More information in this article: overview of WebGL.

Here are some WebGL demos you can test to see how WebGL works:

WebGL demo: Aquarium
WebGL demo – Aquarium


WebGL demo: Body Browser
WebGL Body Browser


WebGL demo: Nine point Five
WebGL demo: Nine point Five



And here’s the GLSL shader of the DoF effect in the Field demo:

<script id="dofVertexShader" type="text/something-not-javascript">
attribute vec4 position;
attribute vec2 texCoord;
varying vec4 v_position;
varying vec2 v_texCoord;
void main() 
{
  v_texCoord = texCoord;
  gl_Position = position;
}
</script>


<script id="dofFragmentShader" type="text/something-not-javascript">
#ifdef GL_ES
precision highp float;
#endif
varying vec2 v_texCoord;
uniform sampler2D mainSampler;
uniform sampler2D blurSampler;
uniform float dof;
uniform float dofInnerRange;
uniform float dofOuterRange;
void main() 
{
  vec4 mainColor = texture2D(mainSampler, v_texCoord);
  vec4 blurColor = texture2D(blurSampler, v_texCoord);
  float depth = mainColor.a;
  float mix_ = (abs(dof - depth) - dofInnerRange);
  float mixAmount = 0.0;
  float blurRange = dofOuterRange - dofInnerRange;
  if (mix_ > blurRange) 
  {
    mixAmount = 1.0;
  } 
  else 
  {
    mixAmount = mix_ / blurRange;
  }
  vec4 color = mix(mainColor, blurColor, mixAmount);
  // Uncomment next line to show depth.
  //color = color * 0.0001 + vec4(mainColor.aaa, 1) * 0.9999;
  // Uncomment next line to show mix amount/
  //color = color * 0.0001 + vec4(mixAmount, mixAmount, mixAmount, 1);
  gl_FragColor = color;
}
</script>




Geeks3D.com

↑ Grab this Headline Animator