.to3D()-plugin for jQuery, which is able to transform selected HTML elements to 3d cubes on WebGL-enabled browsers.
Currently it only works completely on Chrome. 3D functionality also works in Firefox, however as of yet it still lacks 3d CSS3-transformations.
The plugin's 3D content reads its values from CSS/DOM, i.e. sizes, positions, colours, textures etc. Block depth and additional effects can be specified on a per-element basis using the
rgba background colour will render to a transparent cube.
- Renders both a hardware accelerated scene of HTML elements;
- Does the same translations to the HTML elements through CSS3, keeping it interactive;
- Dynamic lighting based on mouse cursor;
- Basic support for jQuery's
- Use your own shader fragments;
- Per-element pixel shaders/render options;
- No documentation whatsoever!
This is still a work-in-progress.
- Optimizing CSS3-transformations to the 3d view;
- Calculating depth based on
z-index and fitting CSS3-
- Native 3d-el
.sides-array based on 3d model
- Dynamic lightning (shadows);
- More CSS-possibilities, such as
- Dynamic camera viewpoint;
- Including some
v0.4 - 20110728
v0.3 - 20110717
- CSS3 3d-transform/Y-rotation support;
- Found out FF doesn't support 3d-css3 yet;
- Another code cleanup.
v0.2 - 20110715
- Texture support;
- Dynamic pixel shader effects support (per element or fullscreen);
- Included fancy pixelshader effects (from here);
- Major code cleanup.
v0.1 - 20110714
- Faster vertex buffering;
- 'Fade in' animation;
- Robust error handling (including for shaders);
- Optional error message on incompatible browsers;
- Dynamic shader loading;
- Major code cleanup (4 httpreqs -> 1).