Tutorial
Introduction:
Product: RealAPI
Official website: https://realistic3.com
Documentation: Babylon.js | Realistic3D
Demo: https://bbl.real-api.com
We are introducing free tool for rendering your 3D scenes including Babylon.js scene at runtime by using RealAPI (beta). Currently RealAPI is beta version that offers free of cost, empowering users to generate realistic and high-quality 3D images effortlessly via simple API calls. Join our community and help shape the future of 3D rendering!
Installation
npm install real_api_bbl
Requirements:
- Signup free account (You will need this for API Key Authorization)
App KeyProduct KeyInstance ID(Optional, default is 0)
Getting started
Import:
import * as REAL from "real_api_bbl";
Lights:
Area light
const options = {
width: 1,
height: 2,
intensity: 2,
diffuse: new BABYLON.Color3(0.66, 0.56, 0.2)
}
const light = new REAL.AreaLight(scene, options);
Sunlight
const options = {
intensity: 2,
shadowEnabled: true,
diffuse: new BABYLON.Color3(0.66, 0.56, 0.2)
}
const light = new REAL.SunLight(scene, options);
Point Light
const options = {
range: 20,
intensity: 2,
shadowEnabled: true,
diffuse: new BABYLON.Color3(0.66, 0.56, 0.2)
}
const light = new REAL.PointLight(scene, options);
Spotlight
const options = {
range: 20,
angle: 1.5,
intensity: 2,
shadowEnabled: true,
diffuse: new BABYLON.Color3(0.66, 0.56, 0.2)
}
const light = new REAL.SpotLight(scene, options);
Render a job:
Step 1: Get render scene
const eye = mainCamera; // Camera or eye to render the view (Optional)
const renderScene = await REAL.Scene(scene, eye);
Step 2: Create new job
const api = REAL.API;
const params = {
"cred": {
"insID": 0,
"appKey": "ABC",
"prodKey": "XYZ"
},
"type": "new",
"render": {
"expFrom": "app",
"output": "PNG",
}
}
const response = await axios.post(api, params);
Response:
{
"msg": "SUCCESS",
"data": {
"jobID": "1711638968_373829",
"expFrom": "app",
"finished": false,
"status": "NEW",
"url": "https://....."
}
}
Note:
You can also render .blend, .gltf, .glb or .fbx directly by changing render parameter in request body
For example:
{
"cred": {
"insID": 0,
"appKey": "ABC",
"prodKey": "XYZ"
},
"type": "new",
"render": {
"ext": "glb",
"expFrom": "app",
"output": "PNG"
}
}
Step 3: Upload scene
const uploadUri = response.data.url;
const renderScene = await REAL.Scene(scene, camera);
const request = await axios.put(uploadUri, renderScene);
OR
If you have file such as .blend, .gltf, .glb or .fbx then can be passed directly
const request = await axios.put(uploadUri, glbFileBlob);
Step 4: Submit job
const params = {
"cred": {
"insID": 0,
"appKey": "ABC",
"prodKey": "XYZ"
},
"jobID": "1711638968_373829",
"type": "render"
}
const response = await axios.post(api, params);
Response:
{
"msg": "SUCCESS",
"data": {
"jobID": "1711638968_373829",
"expFrom": "app",
"finished": false,
"status": "WAITING"
}
}
Step 5: Check job status
You can either check live status or jobs through socket or by using API request
- Using SOCKET
- Using REST API
Please visit official docs or YouTube video regarding how to connect with Socket
const params = {
"cred": {
"insID": 0,
"appKey": "ABC",
"prodKey": "XYZ"
},
"jobID": "1711638968_373829",
"type": "result"
}
const response = await axios.post(api, params);
Response:
{
"msg": "SUCCESS",
"data": {
"jobID": "1711638968_373829",
"expFrom": "app",
"finished": true,
"result": "https://.....",
"status": "COMPLETED"
}
}
I hope you’ll find your way around the parts still needed to make your project a success 
… and meanwhile, have a great day 
.
