Seen.js contains a simple abstraction on top of the graphics capabilities of SVG and HTML5 Canvas elements. All of the other components of this library are agnostic to the type of context it will be rendered in. However, there are some performance considerations.
Creating elements within SVG is generally much slower than drawing directly into an HTML5 Canvas.
seen.js renders 3D scenes into SVG or HTML5 Canvas.
- Materials gallery
- Noisy Wave Patch
- Noisy Sphere
- Same Scene, Canvas vs. SVG
- Same Scene, Multiple Angles
- SVG Masks and Effects
- Audio Equalizer
- N-Body Gravity Simulation
Implementation of Seen.js
Step 1. Create a web page including the seen library. Coffeescript is optional, but all the sample code (as well as the library source) is all coffeescript.
<html> <head> <script src="seen.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script> </head> <body> <svg width="400" height="400" id="seen-canvas"></svg> <!-- OR --> <canvas width="400" height="400" id="seen-canvas"></canvas> <script type="text/coffeescript"> SEE BELOW </script> </body> </html>
Step 2. Create a scene with a single shape and render it using a context.
# Create a shape shape = seen.Shapes.tetrahedron() # Create scene and add shape to model scene = new seen.Scene model : seen.Models.default().add(shape) viewport : seen.Viewports.center(400, 400) # Create render context from canvas context = seen.Context('seen-canvas', scene) # Render it! context.render()
Licensed under Apache 2.0
To see what is new in this version, read the release notes.
- Seen.js Renders 3D Scenes into SVG or HTML5 Canvas (remelehane.wordpress.com)
- Getting started with inline SVG (viget.com)
- All You Need to Know About SVG – Tutorials, Articles, Resources (onextrapixel.com)
- 36 Excellent Data Visualization Tools (smashingapps.com)