WebGi SDK
WebGi is a framework to create high quality unbranded/custom branded 3D applications easily. It can be used to quickly get into production-ready webGL and 3D web graphics without getting into graphics and shaders. The framework is also fully customisable with an extensive API for experienced programmers to add features and make more cool stuff.
Demos and showcase
Features / Plugins
WebGi comes packed with a rendering pipeline and bundles many plugins, that can be added with a single line of code to provide a variety of features listed below. In a custom application it’s possible to tree-shake the bundle by picking the plugins that are required.
- 3D Viewer Core
- Built on three.js
- Highly optimised - for mobiles/tablets and old devices
- Adaptive Quality control - Quality and setting presets for different devices
- Progressive rendering pipeline
- HDR RGBM pipeline
- HDR Half-Float/Float + sRGB pipeline
- Simple API with Single Entry point
- Jittered Shadow Mapping - High quality shadow maps for direction, and spot lights.
- Materials / Extensions / Shaders
- Physically Based Rendering (PBR) workflow - three.js Physical material optimised for product renderings and showcase
- Diamond Plugin - Render high quality diamonds and refractive/glass objects in realtime
- Refraction - High Performance Screen space Refraction
- Anisotropy Plugin - Adds metal Anisotropy to PBR Material
- Clearcoat Tint Plugin - Adds Tint, Thickness and IoR to PBR Material
- Noise Bump Material Plugin - Adds procedural voronoi bump and sparkle/flakes to PBR Material
- Parallax Bump Mapping Plugin - Replaces the default bump mapping with parallax mapping in PBR Materials
- Thin Film Layer Plugin - Adds very fast and non-physical thin iridescence film layer over PBR Material
- Screen Space Post Processing
- Progressive Plugin - Implements the Progressive Rendering Pipeline and adds SSAA to the scene.
- Tonemap Plugin - Tonemaps the result before rendering to the screen
- HDR Bloom Plugin - Adds post Bloom effect in HDR space
- Depth of Field Plugin - Adds depth of field effect around a custom focal point.
- Screen Space Ambient Occlusion (SSAO) - Realtime approximation of Ambient Occlusion in the scene
- Screen Space Reflections (SSR) - Realtime approximation of reflections in the scene
- Screen Space Contact Shadows (SSCS) - Adds shadows to small areas and sections where traditional shadow mapping doesn’t work.
- Screen Space Global Illumination (SSGI) - dev - Approximates indirect bounces from each fragment in the scene to get better diffuse lighting
- Screen Space Ray Traced Ambient Occlusion (SSRTAO) - dev - Better Approximation of Ambient Occlusion by tracing rays in the depth buffer
- Temporal Anti-Aliasing Plugin - Enable TAA when the camera is moving for better antialiasing.
- Velocity Buffer Plugin - dev - Addition to TAA, to be used when objects are moving along with the camera.
- Lighting / Scene Setup
- Ground Plugin - Add ground to the scene with optional baked planar shadows, optional planar/screen-space reflections, background blending and more options
- Contact Shadow Ground Plugin - Simple transparent ground with contact shadows. Cannot be used with Ground Plugin
- HDRi Ground Plugin - Projects the HDR environment map into a hemisphere to get flat ground projection.
- Path Tracing Plugin - dev - Simulates ray tracing in shader using a BVH tree. Uses three-gpu-pathtracer
- Randomized Directional Light Plugin - Progressively jitter directional light to get soft shadows.
- User interactions/Experience
- Dropzone Plugin - Enables drag and drop for files and assets and links with the viewer.
- Full Screen Plugin - Adds support for entering/exiting the full screen mode in browser
- Frame Fade Plugin - Cross Fades frames when anything in changes.
- Picking Plugin - Enables interactions and Ui for selecting/picking an object to edit properties.
- Animations
- GLTF Animation Plugin - Loads and process animations in GLTF along with Camera Markers.
- Camera View Plugin - Set and interpolate between multiple camera states/views.
- Asset Management, Import
- Asset Manager Plugin
- Obj + Mtl Load Plugin
- FBX Load Plugin
- Rhino 3DM Load Plugin
- EXR Load Plugin
- STL Load Plugin
- KTX Load Plugin
- KTX2 Load Plugin
- Export/Render
- Asset Exporter Plugin - Allows to export a GLB or scene presets
- GLTF Draco Export Plugin - Adds support for draco compression after GLB export
- Canvas Recorder Plugin - Render a .webm video or image sequence from an animation or live interactions with different options
- Canvas Snipper Plugin - Helpers to snap and download an image of the canvas frame.
- User interface
- Tweakpane Ui Plugin - Implements all Plugin UIs using tweakpane
- Background / Environment Ui Plugin - Shows UI for changing viewer background and environment maps.
- Hierarchy Ui Plugin - Shows the complete hierarchy of objects in the scene.
- Lights Ui Plugin - Parses lights in the scene and show in the UI, along with Add Light option.
- Simple Viewer Ui - Shows the properties for the root imported objects in the scene
- ExtrasUi Plugin - only for sandbox editor
- Configurators/Apps Helpers
- Material Configurator Plugin - Handles management, serialisation, snapshots etc while making material configurators.
- Switch Node Plugin - dev - Handles management, serialisation, snapshots etc while making product configurators
- Material Library Plugin - dev - Management of material libraries
- Object/Geometry Modifiers
- Object Rotation Plugin - Replicate objects in a circle around an axis.
- Shape Tube Extrude Plugin - Generate geometries by extruding a 2D shape along a 3d tube path.
- Helpers/Development/Generics
- GBuffer Plugin - Renders the G-buffer before every frame
- Debug Plugin - For debug counters, and debugging textures/render targets on the screen.
- Generic Filter Plugin - For creating plugins with a single post/preprocessing pass
- MultiFilter Plugin - For creating plugins with multiple post/preprocessing passes.
- AViewerPlugin - Abstract class to create webgi viewer plugins
- Augmented Reality
- AR Plugin ( WebXR ) - dev
- Physics
- Cannon.js Physics Plugin - dev
- Ammo.js Physics Plugin - dev
- Deprecated
EnvMapTool Plugin
Interaction Plugin
PMREMGenerator Plugin
Features/Plugins marked with dev are not ready for public use yet, but you can track the progress here.
Status
Currently, WebGi SDK is in Public Beta
and is constantly under development.
The 3d viewer is production ready and is being used by multiple companies.
API Docs coming soon.
Latest SDK Version
0.2.97
Manual
This manual covers the basic introduction of setting up 3d viewers, configurators, and online experiences using the webgi engine
. It explains basic concepts and covers many common use-cases and examples.
The complete API
documentation for all the features will be available soon.
The website is also coming soon.
Manual
SDK Links
The SDK code is available at the below links. Since the library is in constant development, the version is updated frequently, make sure to update to the latest from time to time.
The scripts and assets are hosted on Google cloud with Cloudflare CDN to give fast import directly on the websites.
Direct JS import
- Viewer:
https://dist.pixotronics.com/webgi/runtime/viewer-<version>.js
- Editor:
https://dist.pixotronics.com/webgi/runtime/editor-<version>.js
- Module Bundle:
https://dist.pixotronics.com/webgi/runtime/bundle-<version>.js
NPM modules
- JS Bundle:
"webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-<version>.tgz"
- Type Declarations:
"@types/webgi": "https://dist.pixotronics.com/webgi/runtime/bundle-types-<version>.tgz"
See Getting Started for details details
CORS issues with links
There are some Cross-Origin Resource Sharing (CORS)
rules set to prevent abuse with assets.
When working locally, use port 8080
for http://localhost
or 8062
for https://localhost
.
For online development, CodePen and CodeSandbox are allowed.
If you are facing a CORS issue on production, contact us.
License for SDK
The WebGi SDK is free for Evaluation, Testing, Proof of Concept applications, and educational purposes.
We provide paid subscription based licenses for use on commercial websites and applications, along with discounts for bulk license purchases.
We partner with other developers and agencies to integrate our SDK in their platforms and client applications. We are open to new ideas and collaborative projects. Let us know, if you would like to partner.
Read the complete license here: TODO: add link
Email us or ping on discord for different pricing plans and for professional services.
For more details checkout: https://pixotronics.com/#plans
Access
The SDK and pre-built files can be accessed from the below links.
Contact us for source code access and developer support.
To use the viewer in a production environment, contact us for a license.
Discord
Join our new discord server to chat, ask questions, report bugs, suggest features/improvements or to just hang out.
Join Now: https://discord.gg/apzU8rUWxY
and don’t forget to introduce yourself.
Email
Contact details for high priority developer support, partnerships, licensing questions or business queries.
- Support - [email protected]
or contact us personally:
- Palash Bansal - [email protected]
- Prashant Sharma - [email protected]