Putting WebGL to work on SAP BTP: What You Need to Know

[Rohit01]

If you're looking for an innovative way to build powerful 3D applications, then you should consider leveraging WebGL on SAP BTP. WebGL, or Web Graphics Library, is a JavaScript API that allows developers to create interactive 3D graphics, animations, and games for the web. In this post, we'll discuss what WebGL is, how it works on SAP BTP, and what you need to know to get started.

I recently had the opportunity to build a BabylonJS app on SAP BTP. The experience was both exciting and challenging. The challenge was mainly caused by the fact that there are very few resources available for getting started with BabylonJS on SAP BTP.

The challenges of WebGL

While WebGL is a powerful technology for creating interactive 3D graphics and animations in a web browser, it also comes with some challenges that developers may face. Here are a few examples:

1. Performance: WebGL applications can be resource-intensive, which means that they may not run smoothly on older or less powerful computers. Developers must optimize their code to ensure that it runs smoothly on all platforms.


2. Security: Because WebGL applications can access the user's graphics hardware, they must be carefully designed to prevent security vulnerabilities. This includes using secure coding practices and testing the application thoroughly for potential security risks.


3. Learning Curve: WebGL requires knowledge of both JavaScript and 3D graphics programming, which can be challenging for developers who are new to these technologies. Learning how to use WebGL effectively requires a significant investment of time and effort.

Despite these challenges, WebGL remains a powerful tool for creating engaging and interactive web-based applications. With careful planning, optimisation, and testing, developers can create high-quality applications that take advantage of the capabilities of modern web browsers.

 

Architecture

The sheer size of the 3D models would pose a challenge to maintain and manage the application data. We have used the Object Store Service on SAP BTP to store these large objects and maintain the references in the database

Architecture on SAP BTP

Application

We have used ReactJS with UI5 Web Components for React for building the frontend. Along with the react packages we would need,

• @babylonjs/core


• @babylonjs/gui


• @babylonjs/loaders


• @ui5/webcomponents


• @ui5/webcomponents-fiori


• @ui5/webcomponents-react


• @ui5/webcomponents-react-charts


• axios


• babylonjs-hook

 

BabylonJS is a powerful and popular JavaScript-based 3D game engine that allows developers to create stunning 3D games and interactive applications. Here's a guide to getting started with BabylonJS:

1. Install BabylonJS: The easiest way to get started with BabylonJS is to use the official CDN, which can be found at https://cdn.babylonjs.com/babylon.js. You can also download the engine from the official website, https://www.babylonjs.com/.


2. Set up your HTML file: Create a new HTML file and add a reference to the BabylonJS library by including the following script tag in the head of your HTML file:

<script src="https://cdn.babylonjs.com/babylon.js"></script>

3. Create a canvas: Add a canvas element to your HTML file, which BabylonJS will use as a rendering surface for your 3D graphics:

<canvas id="renderCanvas"></canvas>

4. Initialize BabylonJS: In your JavaScript file, create a new BabylonJS scene and pass in the canvas element:

var canvas = document.getElementById("renderCanvas"); 

var engine = new BABYLON.Engine(canvas, true); 

var scene = new BABYLON.Scene(engine);

5. Create a 3D object: In BabylonJS, 3D objects are called "meshes". You can create a simple mesh like a box or sphere using the following code:

var box = BABYLON.MeshBuilder.CreateBox("box", {size: 1}, scene);

This creates a box mesh and adds it to the scene.

6. Add a material: A material defines the appearance of a mesh. You can create a basic material with a solid color like this:

var material = new BABYLON.StandardMaterial("material", scene); 

material.diffuseColor = new BABYLON.Color3(1, 0, 0); // red 

box.material = material;

This sets the material of the box to a red color.

7. Render the scene: To render the scene, you need to call the engine's runRenderLoop() method, which will continuously render the scene at the desired frame rate:

engine.runRenderLoop(function() { scene.render(); });

And that's it! You should now have a basic 3D scene with a box mesh rendered on the canvas.

 

With babylonjs-hook, steps 2, 3, 4 and 7 are packaged together and exposed as a React Component that can directly be consumed into the ReactJS app.

This is just a very basic example, and there's a lot more you can do with BabylonJS, including adding lights, cameras, textures, and more complex meshes. Check out the official documentation and examples at https://doc.babylonjs.com/ to learn more.

 

The whole application can be packaged into an MTAR or can be configured via manifest.yml as a static_buildpack application and deployed to CF runtime on SAP BTP

 

To Conclude

In conclusion, WebGL is a powerful tool that enables developers to build powerful and interactive 3D applications quickly and easily. Leveraging WebGL on SAP BTP allows developers to build and deploy their applications with ease and take advantage of the same tools and infrastructure. With the right knowledge, you can get started quickly creating your own 3D applications on SAP BTP.