Bringing the world of 3D Graphics to Salesforce with WebGL integration

WebGL is a JavaScript API for rendering interactive 3D graphics within any compatible web browser without the use of plug-ins. With WebGL and Salesforce integration we are looking at a larger picture where Salesforce platform could be used to build a cloud-based 3D-PLM
Bringing the world of 3D Graphics to Salesforce with WebGL integration

WebGL (Web Graphics Library) is a JavaScript API for rendering interactive 3D and 2D graphics within any compatible web browser without the use of plug-ins. WebGL introduces an API that closely conforms to OpenGL ES 2.0 that can be used in HTML5 <canvas> elements.

WebGL programs consist of control code written in JavaScript and shader code (GLSL) that is executed on a computer's Graphics Processing Unit (GPU). WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background

This article will simply demonstrate the basic use of WebGL in Salesforce and possible use cases. It's assumed that you already have an understanding of the mathematics involved in 3D graphics, and this article doesn't pretend to try to teach you 3D graphics concepts itself.

But, why 3D Graphics into Salesforce?

Yeah! we obviously won't be looking at Accounts, Opportunities, Cases etc. in 3-Dimensions. There is no need of it :). With WebGL integration we are looking at a larger picture where Salesforce platform could be used to build a cloud-based 3D-PLM (Product Lifecycle Management) solution. Some possible use cases would be:

  1. A Gaming Company - where designers can share, discuss, review and comment on the 3D models (WebGL supported format) that they work on for a project
  2. Healthcare and Scientific R&D - can have an interactive CMS built on top of Salesforce where researchers and scientists can collaboratively store, share and study various Molecular structure of medicines, Human Anatomy, Physiology, Genetics, Clinical trials of new medicines etc.
  3. An Automobile Company - can keep track of the automobile parts that they manufacture/market/use in other products from design to manufacturing to quality to marketing

Demo - Its WebGL and not an embedded video player

WebGL Frameworks

Frameworks are available to create WebGL content quickly and easily without building from the ground up. Below are Javascript based Frameworks with Native 1.0 WebGL Implementation

  1. Three.js
  2. Whitestorm.js
  3. Babylon.js
  5. CopperLicht
  6. JanusWeb
  7. OSG.JS
  8. PlayCanvas


Three.js is the world's most popular JavaScript framework for displaying 3D content on the web, providing you with the power to display incredible models, games, music videos, scientific and data visualisations, or pretty much anything else you can imagine, right in your browser and on your smartphone

The Three.js library is a single JavaScript file. It can be included within a web page by linking to a local or remote copy

The following code creates a scene, adds a camera and a FBX Model to the scene, creates a WebGL renderer and adds its viewport in the document.body element.

<apex:page standardController="Case">
<html lang="en">
        <title>WebGL Salesforce Integration</title>
        <meta charset="utf-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"/>
            body {
                font-family: Monospace;
                background-color: #000;
                color: #fff;
                margin: 0px;
                overflow: hidden;
            #info {
                color: #fff;
                position: absolute;
                top: 10px;
                width: 100%;
                text-align: center;
                z-index: 100;
            #info a {
                color: #046;
                font-weight: bold;

        <div id="info">
            <a href="" target="_blank" rel="noopener">Motion Physics for Character CHX-AX-3BG</a>

        <script src=""></script>

        <script src=""></script>
        <script src=""></script>

        <script src=""></script>

        <script src=""></script>
        <script src=""></script>


            if ( WEBGL.isWebGLAvailable() === false ) {

                document.body.appendChild( WEBGL.getWebGLErrorMessage() );


            var container, stats, controls;
            var camera, scene, renderer, light;

            var clock = new THREE.Clock();

            var mixer;


            function init() {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 2000 );
                camera.position.set( 100, 200, 300 );

                controls = new THREE.OrbitControls( camera );
       0, 100, 0 );

                scene = new THREE.Scene();
                scene.background = new THREE.Color( 0xa0a0a0 );
                scene.fog = new THREE.Fog( 0xa0a0a0, 200, 1000 );

                light = new THREE.HemisphereLight( 0xffffff, 0x444444 );
                light.position.set( 0, 200, 0 );
                scene.add( light );

                light = new THREE.DirectionalLight( 0xffffff );
                light.position.set( 0, 200, 100 );
                light.castShadow = true;
       = 180;
       = - 100;
       = - 120;
       = 120;
                scene.add( light );

                // scene.add( new THREE.CameraHelper( ) );

                // ground
                var mesh = new THREE.Mesh( new THREE.PlaneBufferGeometry( 2000, 2000 ), new THREE.MeshPhongMaterial( { color: 0x999999, depthWrite: false } ) );
                mesh.rotation.x = - Math.PI / 2;
                mesh.receiveShadow = true;
                scene.add( mesh );

                var grid = new THREE.GridHelper( 2000, 20, 0x000000, 0x000000 );
                grid.material.opacity = 0.2;
                grid.material.transparent = true;
                scene.add( grid );

                // model
                var loader = new THREE.FBXLoader();
                loader.load( ' Dancing.fbx', function ( object ) {

                    mixer = new THREE.AnimationMixer( object );

                    var action = mixer.clipAction( object.animations[ 0 ] );

                    object.traverse( function ( child ) {

                        if ( child.isMesh ) {

                            child.castShadow = true;
                            child.receiveShadow = true;


                    } );

                    scene.add( object );

                } );

                renderer = new THREE.WebGLRenderer( { antialias: true } );
                renderer.setPixelRatio( window.devicePixelRatio );
                renderer.setSize( window.innerWidth, window.innerHeight );
                renderer.shadowMap.enabled = true;
                container.appendChild( renderer.domElement );

                window.addEventListener( 'resize', onWindowResize, false );

                // stats
                stats = new Stats();
                container.appendChild( stats.dom );


            function onWindowResize() {

                camera.aspect = window.innerWidth / window.innerHeight;

                renderer.setSize( window.innerWidth, window.innerHeight );



            function animate() {

                requestAnimationFrame( animate );

                var delta = clock.getDelta();

                if ( mixer ) mixer.update( delta );

                renderer.render( scene, camera );





About the author
Muralidhar Sampathirao

Muralidhar Sampathirao

Sr Technical Consultant @ Salesforce • With thrdz I am designing the building blocks for Enterprise Applications • Articles, opinions and resources expressed/shared are entirely my personal views.


DZining the building blocks for Enterprise Applications


Great! You’ve successfully signed up.

Welcome back! You've successfully signed in.

You've successfully subscribed to THR(EA)DZ.

Success! Check your email for magic link to sign-in.

Success! Your billing info has been updated.

Your billing was not updated.