Introducing
The Slant team built an AI & it’s awesome
Find the best product instantly
Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
Try it now
4.7 star rating
0
What is the best alternative to p5.js?
Ad
Ad
Three.js
All
12
Experiences
Pros
10
Cons
2
Top
Pro
Feature rich
Effects: Anaglyph, cross-eyed and parallax barrier. Scenes: add and remove objects at run-time; fog Cameras: perspective and orthographic; controllers: trackball, FPS, path and more Animation: armatures, forward kinematics, inverse kinematics, morph and keyframe Lights: ambient, direction, point and spot lights; shadows: cast and receive Materials: Lambert, Phong, Standard, smooth shading, textures, PBR and more Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass and extensive post-processing library Objects: meshes, particles, sprites, lines, ribbons, bones and more - all with Level of detail Geometry: plane, cube, sphere, torus, 3D text and more; modifiers: lathe, extrude and tube Data loaders: binary, image, JSON and scene Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs and more Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and OBJ Support: API documentation, public forum Examples: Over 150 files of coding examples plus fonts, models, textures, sounds and other support files
See More
Top
Con
Lack of versioning system means that the API changes frequently
Three.js releases a new revision about once a month, and the API can change at any time. This means that a lot of third party help found online is out of date.
See More
Top
Pro
Well documented
The documentation is detailed, providing clear explanations and code samples of the various features. There are also hundreds of examples available.
See More
Top
Con
Weak visual tools
Three.js has its own editor but it has been weakly developed. It does not support a lot of engine features.
See More
Top
Pro
Helpful and friendly community
Thanks to the recently introduced forum, it is easy to find a community of helpful developers.
See More
Top
Pro
Support for physically based rendering
With the introduction of the new MeshStandardMaterial, three.js support physically based rendering (PBR) out of the box allowing for real life quality material and lighting.
See More
Top
Pro
Support for most industry standard file formats
Three.js has importers for most of the industry standard files format (obj, mtl, fbx, 3ds, gltf, collada, babylon, playcanvas, stl, vrml, draco and many more), making it easy to author assets in your favourite modelling software and import them for use them in three.js.
See More
Top
Pro
Actively developed
Three.js has great project health, with activity on Github daily for bug fixes and new features.
See More
Top
Pro
Fallback canvas rendering
Three.js offers a canvas renderer as a fallback when WebGL is not available.
See More
Top
Pro
Support for special effects and postprocessing
Three.js support many special effects and post-processing filters including particles, lensflare, sprites, real time reflection and refraction and even area based lighting.
See More
Top
Pro
Hundreds of officially maintained plugins, extensions, control systems, importers, exporters and special effects
The core of the three.js system is kept to a minimum to reduce file size, however there are also hundreds of extensions maintained in the offical repo on github, along with many free textures, fonts and models. You can find them all here.
See More
Top
Pro
Plenty of tutorials and examples
Three.js official documentation provides plenty of well-written examples with a wide variety of tutorials written by the community available that you can find by doing a google search.
See More
Hide
See All
Experiences
Get it
here
92
18
Paths.js
All
3
Experiences
Pros
3
Top
Pro
Just helps building graphs, complements template engines or data-binding libraries
Can be used together with a template engine such as Mustache or Handlebars to display SVG graphics or instead of a static template engine, you can use a data binding or MVC/MV* library, such as Ractive.js, Angular, Mithril or Facebook React.
See More
Top
Pro
3 APIs for the price of one
3 APIs of increasing abstraction: Low-level (svg paths) Basic shapes (Polygon, Rectangle, Bezier, Sector, Connector etc..) Basic graphs (Pie, bar, stock, radar, tree, waterfall, sankey etc...) There is no magic, you can have as much control as you want on how you define your graphs, source code very readable.
See More
Top
Pro
Lightweight
18kb minified.
See More
Hide
Get it
here
4
0
Snap.svg
All
7
Experiences
Pros
4
Cons
3
Top
Pro
Pure SVG library
See More
Top
Con
Not actively developed
During 2016 was few updates, more updates in 2017
See More
Top
Pro
Written by a SVG Guru and pioneer
Dmitry Baranovskiy also wrote Raphael (project now owned by Sencha), this is the updated modern version of that library. Dmitry also is a champion directly affecting the future of SVG standards with W3C
See More
Top
Con
Spotty exporting
Exporting doesn't work well (if at all sometimes) with SVGs exported from anything other than Adobe products.
See More
Top
Pro
Backed by Adobe
Adobe is backing the development of snap.svg
See More
Top
Con
Weak documentation
Explanations provided in the documentation can often be unclear, with some features missing from the documentation all together.
See More
Top
Pro
Features
Supports the newest SVG features like masking, clipping, patterns, full gradients, groups, and more
See More
Hide
See All
Experiences
Get it
here
22
2
Babylon.js
All
7
Experiences
Pros
4
Cons
2
Specs
Top
Pro
Small (but helpful) community
Thanks to the increasing popularity of Babylon, it has a growing community of helpful developers. It's easy to find help on their forum.
See More
Top
Con
Young project
Babylon is quite young compared to many of it's competitors (released in 2013). The community is still somewhat small, however growing quickly.
See More
Top
Pro
A good amount of easy to understand resources to learn from
Babylon provides a playground where you can explore examples and play with the code. The official documentation offers a wide variety of well-written tutorials on topics from beginner to advanced. Additionally, there are many tutorials written by the community available that you can find by doing a google search.
See More
Top
Con
Still evolving
See More
Top
Pro
Great base shader material
See More
Top
Pro
Actively developed
Babylon has great project health, with activity on Github daily for bug fixes and new features.
See More
Specs
Rendering:
Physically based rendering
Tech:
WebGL1/2 + JavaScript or TypeScript
Special FX:
particles, postprocesses, lens, glow, etc..
Hide
See All
Experiences
Get it
here
229
26
PlayCanvas
All
17
Experiences
Pros
13
Cons
3
Specs
Top
Pro
Real-time collaborative online editor tool
PlayCanvas has an online editor that lets you build scenes and work with other people in your team in real-time. This is all done through the web browser without having to install any additional software.
See More
Top
Con
Private projects are only available for premium users
The free tier does not support any private projects. Instead, all the code and assets will be hosted openly. While not a problem for open source games and for developers who intend to make an open source game, it can be a deal-breaker for teams who want to keep their code and assets private.
See More
Top
Pro
Powerful assets pipeline
Assets and content delivery is very different on a web platform comparing to native. So PlayCanvas challenges best practices to allow developers decide how their content is delivered and in what form. Async Assets download allows developers to load content as the app goes, instead of asking to download all assets in advance risking users to simply navigate away while staring at loading screens. Formats for 3D models and textures support covers all the popular tools. And the workflow is as simple as dragging and dropping your files right into the Assets Panel. The cloud will do the rest of the hard work optimizing and converting your files into runtime-friendly and compressed data.
See More
Top
Con
No collision offset
See More
Top
Pro
Rendering engine runs on the browser
Has an advanced WebGL renderer that runs in the browser.
See More
Top
Con
Not many tutorials
See More
Top
Pro
Avoids having to download lots of textures for lightmaps
Lightmaps are an efficient way to deliver lighting to your scenes for a long time. But they come with the cost of large textures. PlayCanvas offers a unique solution for a web platform, it renders lightmaps when an app is loading in runtime. This is faster than downloading MBs of textures. And it's much more convenient: simply switch your light sources to bake, and static models to be lightmapped, and the engine will do the rest.
See More
Top
Pro
Friendly and active community
PlayCanvas has Feed as homepage for registered users, listing Dev Logs of other developers. This allows to socialize with other developers like yourself in a twitter-like environment. More to that, there is also an active forum, where developers help each other to solve their challenges. Developers of PlayCanvas itself are always looking forward to chat and help the community with any problems that may arise.
See More
Top
Pro
Integrated physics engine
PlayCanvas lets users integrate physics in their game rather easily, using the powerful Bullet Physics Engine (ammo.js). Should also be noted that the physics engine is delivered as an optional library, so by default being disabled it does not add any extra download size to your apps.
See More
Top
Pro
Has a free tier
Engine is free for projects under 200MB and with no more than 2 people on a team. The free tier has no engine restrictions. Tools are totally free too. There are no special limiting features behind any paywalls, and free users have all the features as paid users. There are no royalties associated with publishing your apps and games - you've made them, you own them. It is free to publish to playcanvas.com as well, just by one click in Editor.
See More
Top
Pro
Cross-platform support
PlayCanvas lets you build games that run in mobile, desktop browsers, and native mobile apps. PlayCanvas can even make games that can run inside mobile social media and instant messenger clients like Twitter and WhatsApp.
See More
Top
Pro
Small app size
The engine itself weighs just under 150Kb, and it's always challenged to stay small. There is no extra weight that has to be carried with your app, just your assets and scripts in a runtime-friendly compressed form. This allows users to engage with your content in matter of seconds, and even just under a second on a good connection.
See More
Top
Pro
Open source
PlayCanvas is fully open source and is under active development.
See More
Top
Pro
Very easy to use
See More
Top
Pro
Loads extremely fast
See More
Top
Pro
Has hot code reloading
Real-time link between your launched app and the editor allows the developer to preview and play with their scene without needing to refresh the game after every change in the code to see the updated result.
See More
Specs
Price:
Free to Use & Open Source
Supported platforms:
Any Browser on Windows, MacOS, and Linux
Dev platforms:
Windows, Linux, MacOS
Mobile targets:
Android, iOS
See All Specs
Hide
See All
Experiences
Get it
here
72
12
Shield UI Charts
All
7
Experiences
Pros
6
Cons
1
Top
Pro
Many chart types available
There are more than 20 types of charts available for use.
See More
Top
Con
Commercial
Pay by developer starting from 349$.
See More
Top
Pro
Wrappers for ASP.NET, ASP.NET MVC and Apache Wicket
Each chart can be implemented to ASP.NET and ASP.NET MVC applications, with detailed documentation and guides for each.
See More
Top
Pro
Good documentation
Each of the available charts has documentation and guides available for every different implementation (JavaScript, ASP.NET etc.)
See More
Top
Pro
Interactive charts
The charting widget is built to facilitate client side interactions and notifications.
See More
Top
Pro
Out of the box pan-and-zoom
Zoom-in on specific points of interest on the graph with the mouse – a single property allows this out-of-the-box.
See More
Top
Pro
Supports combining different charts
You can combine different charts (they can be of the same type or even different types of charts) to display data correlations.
See More
Hide
See All
Experiences
Get it
here
18
4
Fabric.js
All
8
Experiences
Pros
6
Cons
2
Top
Pro
Out of the box Node.js support
Fabric supports node.js, and has an npm package available for server side rendering with all the dependencies handled for you. This allows you to provide graceful degradation for image fallbacks to canvas or SVG content.
See More
Top
Con
No front-end only version via Node
NPM package has major dependencies.
See More
Top
Pro
Vector focused API
Drawing objects in fabric are vector focused, so everything is easily transformable. It makes it easy to create complex pathed shapes, add gradients, or filters. Although fabric is great for vector rendering, it also has image support as well.
See More
Top
Con
A little bit less support for Angular.js
https://github.com/michaeljcalkins/angular-fabric
See More
Top
Pro
Outputs to canvas and SVG and JSON
When it comes to format compatibility, Fabric is the best, with the ability to output to Canvas, SVG, and JSON. SVG provides backwards compatibility for older browsers, and JSON allows you to store rendered output for later use.
See More
Top
Pro
Great interaction with SVG, excellent coding
If you are about to customize the library to your needs, this is the project of choice! Great programming work!
See More
Top
Pro
Good support for SVG multi-line text
Allows creating multi-line text that can even be interactively edited by user interaction.
See More
Top
Pro
Browser only version now available
If the node-canvas dependency is a problem you can now look for npm install fabric@x.y.z-browser
See More
Hide
See All
Experiences
Get it
here
48
10
Anime.js
All
3
Experiences
Pros
3
Top
Pro
Very simple
It's one of the easiest drawing libraries to learn.
See More
Top
Pro
Works with all of the common browsers
That includes: Chrome, Safari, Opera, Firefox and IE 10+
See More
Top
Pro
Pretty lightweight
Only 9.43KB.
See More
Hide
Get it
here
4
1
Paper.js
All
7
Experiences
Pros
5
Cons
2
Top
Pro
Operator overloading
It is written in a language nearly identical to JavaScript, but adds helpful operator overloading to allow you to perform coordinate arithmetic.
See More
Top
Con
Limited to single instance
The code is written in a way that everything is global and limited to a single instance, there is no clean way to use 2 separate instances in the same page
See More
Top
Pro
Geometric Tests
An almost-unique feature: can test geometry if contains(), isInside() or intersects() one other object. Offers even hit-testing methods!
See More
Top
Con
Not supported in older browsers
Paper.js runs on top of HTML5 Canvas, which is not supported in older browsers.
See More
Top
Pro
Behaviours handled by objects
Objects in Paper make it easy to extend parent objects and run constructor functions without having to worry about JavaScript prototypal inheritance. Because of this it is easy to make compound drawing objects with their own instance variables and behaviors. Example: each swimming tadpole follows its own behavior These features make it easier to create objects that can act autonomously with complex behaviors. This makes Paper a good choice for particle effects and game development.
See More
Top
Pro
Object constructors
Elements all have the option of being created with a hash of properties which promotes clean, concise, and contextually local coding practice.
See More
Top
Pro
Good for making games
Paper uses a frame based approach to rendering the canvas. This makes it conceptually easier to create objects with animations and behaviors that interact and perform with other objects. Along with Paper's approach to creating and managing objects this makes Paper especially good for creating applications with complex behaviors with many elements doing different actions at once, and makes it a good choice for making games.
See More
Hide
See All
Experiences
Get it
here
67
14
Raphael
All
6
Experiences
Pros
4
Cons
2
Top
Con
Complicated, confusing documentation
The documentation is often not clear and lacks practical examples.
See More
Top
Pro
Works with older browsers
Because Raphael supports rendering VML + SVG, it is one of the few drawing libraries that is backwards compatible with older browsers that do not support canvas.
See More
Top
Con
Can be difficult to get support
Online communities for Raphael are small and inactive compared to other drawing libraries, and many issues opened on github are never addressed.
See More
Top
Pro
Built in animations
Several built-in animations (such as ways of easing) are provided for you out of the box, but Raphael also allows cubic beziers for more complicated easing functions. Any drawing object property can be modified making it similar to css animations in jQuery.
See More
Top
Pro
Every object is interactive with events
Everything that is drawn in Raphael is an object which means it is easy to manipulate any part of the rendered image after it is processed. It uses an event handler system for user inputs which makes it easy to learn for JavaScript developers used to event based libraries. An interactive chart demo. This style of handling objects makes Raphael a good fit for rendering interactive diagrams and charts that can also interact with other parts of the page.
See More
Top
Pro
Easy creation of charts with extension
gRaphael is a Raphael extension to help you easily create graphs and charts.
See More
Hide
Get it
here
50
12
Pixi.js
All
3
Experiences
Pros
2
Cons
1
Top
Pro
Supports WebGL w/ canvas fallback
Pixi is a WebGL renderer, but can fall back to canvas if WebGL is not supported or turned off.
See More
Top
Con
Not a complete solution
Pixi only provides the renderer.
See More
Top
Pro
Will be familiar to ActionScript developers
Pixi.js uses a code structure that's very similar to ActionScript.
See More
Hide
Get it
here
47
12
D3.js
All
9
Experiences
Pros
7
Cons
2
Top
Con
Steep learning curve
The complexity and flexibility of D3.js results in it being a time-consuming tool to learn for many users. D3 is incredibly flexible; probably more so than any other JavaScript visualization library at the time of this posting. With that flexibility comes increased complexity. If you just want to create some quick charts you will get results faster with something else.
See More
Top
Pro
Large community
D3.js is a very popular tool with an active community, resulting in plenty of learning resources and fast responses to questions.
See More
Top
Con
"Selections" are elegant, but somewhat hard to grok
Selections are core to working with D3 beyond the basics. They're powerful and useful, but require new developers to get up to speed (e.g. set aside 30m to read and digest: https://github.com/mbostock/d3/wiki/Selections) and if used in the context of a larger application will result in a portion of the code using different patterns than the rest, requiring a translation layer in between.
See More
Top
Pro
Huge number of examples online
Most of the examples provided are by the author, but there's also a great community writing plugins and more examples.
See More
Top
Pro
Doesn't require a proprietary framework
D3's emphasis on web standards gives you the full capabilities of modern browsers without tying yourself to a proprietary framework.
See More
Top
Pro
Versatile library for manipulating data on the DOM
See More
Top
Pro
Very flexible join paradigm
Can be tricky at first, but once learned, data manipulation and binding can easily generate complex visualizations for massive amounts of data.
See More
Top
Pro
Great for highly interactive scenes
D3.js offers incredible levels of interactivity.
See More
Top
Pro
Backwards compatible
D3.js is intended for modern browsers, so supports IE9 and above (IE8 with an additional library) as well as all the other modern browsers.
See More
Hide
See All
Experiences
Get it
here
357
65
Highcharts
All
9
Experiences
Pros
7
Cons
2
Top
Pro
Many different charts with lots of options
Highcharts provides 20 different types of charts to choose from, and they make it simple to combine chart types.
See More
Top
Con
Commercial
Highcharts is not free for commercial projects, with a starting price of US$590 for Single Developer + Maintenance & Support
See More
Top
Pro
Good documentation
Very handy with examples and explanations.
See More
Top
Con
The examples are not that great
For instance, example's JsFiddle may get stalled when loading.
See More
Top
Pro
Excellent browser support
Highcharts supports all modern browsers (including IE6 and up), iOS and Android.
See More
Top
Pro
Large and active community
Highcharts has a large and supportive community, resulting in a fast response from both stack overflow and the Highcharts forum.
See More
Top
Pro
Lots of good examples
The site has a selection of good examples that will help you get started quickly.
See More
Top
Pro
Supports multiple Y axes
Important for trend correlation, eg. comparing number of clicks to sale amounts. Not same scales / units.
See More
Top
Pro
Library to support Microsoft .NET
Compatable with .NET framework 4+, can develop graphs from server side for ASP .NETand ASP .NET MVC applications.
See More
Hide
See All
Experiences
Get it
here
66
18
GraphicsJS
All
9
Experiences
Pros
9
Top
Pro
Powerful line drawing
Not only Bezier curves but also any lines, shapes, arcs, etc. out-of-the-box.
See More
Top
Pro
Convenient API
Clear and concise API with chaining support.
See More
Top
Pro
Virtual DOM
Rapid drawing. Only what is necessary is drawn.
See More
Top
Pro
Has its own transformation engine
No need to use embarrassing in-browser transformations.
See More
Top
Pro
Legacy browser support
IE6+.
See More
Top
Pro
Smart layering system
With z-index.
See More
Top
Pro
Rich text features
Multiline text support, text measurement, wrap, indent, spacing, align, etc.
See More
Top
Pro
Full accessibility (Section 508)
See More
Top
Pro
Events support
All browser events are dispatched in the same way in virtual DOM structure also.
See More
Hide
See All
Experiences
0
32
12
PERGOLA
All
3
Experiences
Pros
2
Cons
1
Top
Con
Commercial license
PERGOLA does not offer a free version. The price for a single developer to use PERGOLA is 400 €.
See More
Top
Pro
HTML
Pergola runs seamlessly in an HTML environment (option in configuration file). All the examples are provided both as SVG standalone and embedded in HTML, and are strictly equal. Besides its universal Node Helper (http://www.svgmagazine.com/jul2011/dom-helper.html) Pergola also provides the equivalent for building HTML nodes and <foreignObject> HTML nodes.
See More
Top
Pro
SVG native
The first and most accomplished SVG native library, 100% cross-platform compatible.
See More
Hide
Get it
here
2
1
ZIM
All
5
Experiences
Pros
5
Top
Pro
ZIM lets you write less code
Here is a chart of examples showing ZIM at 37% less code the developer writes when compared to other frameworks such as PixiJS, Flutter, CreateJS, PaperJS, P5js, Phaser and the DOM.
See More
Top
Pro
ZIM supports chaining
It is quite common in ZIM to not even store an object in a variable as chaining is available for almost all methods and there are short chainable methods for most properties. new Circle().center().drag(); new Rectangle() .loc(100,100) .alp(0) // alpha .animate({x:200, alpha:1}, .5);
See More
Top
Pro
ZIM has dynamic parameters
new Tile(new Circle(20, series(red, blue, green), 10, 10).center(); // tiles 10x10 circles with colors is series of red, blue or green new Emitter([new Circle(), new Rectangle()]).center(); // emits random circles and rectangles interval({min:1, max:3}, ()=>{}); // each interval is between 1 and 3 seconds So passing in a series lets you pick in order, passing in an array lets you pick randomly, passing in a min/max range picks from the range, passing in a function picks the result of the function. These can be applied to all styles too.
See More
Top
Pro
ZIM has Style on the Canvas
Style = { color:red, Button:{ color:blue; } } new Circle().center(); // red new Button().center(); // blue
See More
Top
Pro
The ZIM DUO technique of providing regular parameters or a configuration object literal is very handy.
For instance: new Rectangle(100,100,undefined,undefined,undefined,20).center(); or new Rectangle({width:100, height:100, corner:20}).center();
See More
Hide
Get it
here
0
0
Built By the Slant team
Find the best product instantly.
4.7 star rating
Add to Chrome
Add to Edge
Add to Firefox
Add to Opera
Add to Brave
Add to Safari
Try it now - it's free
{}
undefined
url next
price drop