Authoroptions parameter.
A transparent rgba background colour will render to a transparent cube.
It's a
.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.
Description
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
Features
- 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
.animate(); - Use your own shader fragments;
- Per-element pixel shaders/render options;
- No documentation whatsoever!
This text is selectable
Todo
This is still a work-in-progress.
- Optimizing CSS3-transformations to the 3d view;
- Calculating depth based on
z-indexand fitting CSS3-transform: scale(); - Native 3d-el
.sides-array based on 3d model - Dynamic lightning (shadows);
- More CSS-possibilities, such as
border-radius,gradient,transform(scale,rotation,translation); - Dynamic camera viewpoint;
- Including some
<video>; - Documentation/publication?
Changelog
v0.4 - 20110728
- CSS3 3d-transform/Y-rotation support;
- Found out FF doesn't support 3d-css3 yet;
- Another code cleanup.
- Texture support;
- Dynamic pixel shader effects support (per element or fullscreen);
- Included fancy pixelshader effects (from here);
- Major code cleanup.
- 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).
- Initial demo release
