WebGL and pictures transition.

WebGL can be used with one WebGL capable browser to make some nice effects or games.
This website show us how nice can be show pictures into website .
You can select one effect (ripple, page turn, door way, ...)  with shape Bezier curve ( over time ) and the delay effect.

SculptGL the new 3D sculpting online.

Note: This tool has a new interface - the scrrenshot is old.
SculptGL is a useful WebGL application for 3D sculpting.
You can import and export your meshes into OBJ files.
It's came with some features like dynamic subdivision, decimation, uniformisation and adaptive sculpting.
You can test it here.

Test your browser WebGL with glMatrix.

The glMatrix is designed to perform vector and matrix operations stupidly fast! By hand-tuning each function for maximum performance and encouraging efficient usage patterns through API conventions, glMatrix will help you get the most out of your browsers Javascript engine.

The glMatrix has moved to GitHub.

Test with the new benchmark.

You can test your browser using old google

I have one old video card NVIDIA FX 5500 and this is the output.

 This page benchmarks the performance of several matrix libraries intended for use with WebGL: glMatrix, mjs, CanvasMatrix, and EWGL_math
Benchmark times are averaged over 10 runs of 20,000 iterations of the target operation.
=============================================
Multiplication
=============================================

glMatrix - Avg: 321.4ms, Min: 318ms, Max: 333ms

mjs - Avg: 563.8ms, Min: 560ms, Max: 569ms

CanvasMatrix - Avg: 26ms, Min: 24ms, Max: 30ms

EWGL - Avg: 591.3ms, Min: 321ms, Max: 2963ms

=============================================
Translation
=============================================

glMatrix - Avg: 81.6ms, Min: 81ms, Max: 84ms

mjs - Avg: 642.2ms, Min: 638ms, Max: 650ms

CanvasMatrix - Avg: 123.3ms, Min: 120ms, Max: 126ms

EWGL - Avg: 114.4ms, Min: 112ms, Max: 119ms

=============================================
Scaling
=============================================

glMatrix - Avg: 75.8ms, Min: 74ms, Max: 78ms

mjs - Avg: 603.1ms, Min: 600ms, Max: 609ms

CanvasMatrix - Avg: 246ms, Min: 245ms, Max: 247ms

EWGL - Avg: 96.2ms, Min: 95ms, Max: 100ms

=============================================
Rotation (Arbitrary axis)
=============================================

glMatrix - Avg: 276ms, Min: 269ms, Max: 304ms

mjs - Avg: 6684.8ms, Min: 815ms, Max: 59376ms

CanvasMatrix - Avg: 602.8ms, Min: 594ms, Max: 623ms

EWGL - Avg: 286ms, Min: 284ms, Max: 289ms

=============================================
Rotation (X axis)
=============================================

glMatrix - Avg: 228ms, Min: 227ms, Max: 230ms

mjs - Avg: 821.4ms, Min: 819ms, Max: 825ms

CanvasMatrix - Avg: 605ms, Min: 331ms, Max: 3010ms

EWGL - Avg: 272ms, Min: 265ms, Max: 284ms

=============================================
Transpose
=============================================

glMatrix - Avg: 53.9ms, Min: 49ms, Max: 75ms

mjs - Avg: 70.9ms, Min: 66ms, Max: 99ms

CanvasMatrix - Avg: 2.3ms, Min: 2ms, Max: 3ms

EWGL - Avg: 48.1ms, Min: 47ms, Max: 49ms

=============================================
Inverse
=============================================

glMatrix - Avg: 378.2ms, Min: 376ms, Max: 383ms

mjs: Unsupported

CanvasMatrix - Avg: 371.9ms, Min: 344ms, Max: 500ms

EWGL - Avg: 1717.9ms, Min: 1323ms, Max: 4697ms

=============================================
Inverse 3x3
=============================================

glMatrix - Avg: 119.4ms, Min: 118ms, Max: 122ms

mjs - Avg: 181.8ms, Min: 180ms, Max: 185ms

CanvasMatrix: Unsupported

EWGL: Unsupported

=============================================
Vector Transformation
=============================================

glMatrix - Avg: 53ms, Min: 52ms, Max: 54ms

mjs: Unsupported

CanvasMatrix: Unsupported

EWGL: Unsupported

This can help you when want to test some new features of WebGL glMatrix.

Using SpiderGL to test shaders .

SpiderGL is a JavaScript 3D Graphics library which relies on WebGL for realtime rendering.

You can test it online using your browser using this website.

The website allow you to write shaders and also rendering the output.

Read more about shaders tutorial here.

Tips and tricks: use your tablet to see webgl output.

One big problem it's the result of WebGL output.
You have an old pc and also you want to make WebGL stuff.
Also, you have one big problem and this is about your video card and browser.
And this problem it's:... don't want to show the result of your WebGL.
The solution is your tablet.
Many tablets have a good video card also you can use firefox web browser.
I try this demos and all working fine.
My tablet has a MALI GPU with 400 Mhz with 2D, 3D processor.
If you have ideas about how to use tablets to solve things, just send or comment here.

Illyriad’s 3d Town rough demo with WebGL

The team development of Illyriad game try to use webgl API.
The result is a rough and ready demo.
The team tee us about this demo :
It’s very rough, not optimized and currently only runs on Chrome [working in all browsers that support WebGL is our priority]; but that’s kind of the point – its a technology tester to ensure we weren’t making a mistake.
I saw the screenshots and videos , but on my laptop the demo give me some errors.
The beginning is good , I hope will see in the future a good game, not just only a demo.
You can read more on this site.

WebGL benchmarks by Stephen Bannasch.

You can try the new update of Stephen Bannasch benchmarks.
Stephen tell us about new features:

I've updated my benchmark page comparing matrix libraries useful for webgl programming with newer versions of some of the libraries:

- closure to svn rev: 1364
- glMatrix to 1.0.1
- tdl to commit: 59d484f, Fri Jun 3 2011
Also you can download the source code for these benchmarks.You can be found here on github.

X3DOM - part 001.

What is X3DOM?
The official website gives us the answer.
X3DOM (pronounced X-Freedom) is an experimental open source framework and runtime to support the ongoing discussion in the Web3D and W3C communities how an integration of HTML5 and declarative 3D content could look like. It tries to fulfill the current HTML5 specification for declarative 3D content and allows including X3D elements as part of any HTML5 DOM tree.
We try to use it.
The official site tell us about the browsers and X3DOM.
Internet Explorer 9 = does/will not support WebGL. So you have to install the InstantReality-plugin or Flash 11.
Google Chrome ver 9.x = supports WebGL natively.
Firefox >= 4.x = supports WebGL natively.
Safari (Mac only: Safari 5.1 on OS X 10.6 and 10.7) = include support for WebGL (Windows version does not), but you need enable it through the “Developer”-menu. To activate the “Developer”-menu go to Preferences->Advanced and check the “Show Developer menu in menu bar” button.
Let's check it!
First, check here if your browser supports X3DOM.
If your browser not supports X3DOM , you will see this :

Also , the running example will show you this:

Now, Let's try a simple example. Create a html file and paste the code:

<!DOCTYPE html>
<html>
<head>
<body>
 <title>TEST X3DOM</title>
 <link rel="stylesheet" type="text/css" href="http://www.x3dom.org/x3dom/release/x3dom.css" /></link>
 <script type="text/javascript" src="http://www.x3dom.org/x3dom/release/x3dom.js"></script>
</body>
<h1>Show box under x3dom !</h1>
<x3d width="500px" height="500px">
 <scene>
  <shape>
   <appearance>
    <material diffuseColor='blue'></material>
   </appearance>
   <box></box>
  </shape>
 </scene>
</x3d>
</html>

Also if you want then we can install this (instantreality Framework 2.0).
I managed to run version 6.0.2 Firefox example by changing the settings WebGL.
I wrote in the address bar about:config and I looked and changed the setting:
webgl.force-enabled to true.
Open the file with the Firefox web browser.We can see one blue box...

... and Chrome Web Browser (ver. 13.0.782.220 m)with this result:

Under IE , I got errors ... Although I have installed the InstantReality-plugin or Flash 11.

You can see more examples here.

OES_texture_float WebGL extension under WebGL

In the video below you see a demo using OES_texture_float WebGL extension.

If the video card is the generation then you need to use Chrome and test online here.
This demo uses the following features:

• Raytraced reflections and refractions
• Analytic ambient occlusion
• Heightfield water simulation *
• Soft shadows
• Caustics **

It seems that technology WebGL has a brighter future , the proof is many demos on internet.

WebGL - now in beta stage in Google Chrome

WebGL is now in beta stage in Chrome. WebGL is a 3D graphics API .
This JavaScript API can be use to create 3D web apps.
As we know it is based on the OpenGL ES 2.0 API
My verssion is 9.0.597.19 beta Google Chrome and run well the demo from here.
It moves a little hard but working on an Asus Eee.