RealAPI: Render or Bake famous 3D tools such as three.js, babylon.js and Unity3D at runtime

5 min readAug 21, 2023

Imagine a world where real-time rendering and baking are no longer reserved for the realm of complex setups and intricate processes. Instead, with a few simple API calls, you can bring your 3D creations to life, transforming your projects into immersive experiences that captivate and engage. Today, I’m excited to introduce a game-changer that makes this vision a reality

Product name: RealAPI
Website: https://realistic3.com/
Official docs click here (中文版点这里)

Also, this tool has comes with it’s own built-in Area Light and Sunlight for any kind of projects no matter three.js, babylon.js, FBX and GLTF/GLB etc. So we don’t need to worry about whether or not our tool comes with Area Light or Sunlight, this tool has resolved this issue. Both Area and Sunlight can be used for Baking or Photorealistic rendering at runtime.

Note:

As it is beta version which means there are still developing some features that will be available as soon as possible. So let’s get together and support in improvement as much as possible.

Usage Examples:

All rendering is basically done in 4 simple steps.

Create new job
Upload scene
Render job
Get result

You can use any native API requesting tool. However, if you want to track live status of your job, you can use Socket

Using REST API calls:

You can use any tool that can be use for API requesting. We use Postman for this example.
For details can see REST API docs

Basic overview

Method: POST
Endpoint: https://app.real-api.online/rapi/render
Headers: {Content-Type: application/json}

Request Body:

{
    "cred": {
        "insID": <Your Ins ID>, // Default=0
        "appKey": "<Your App Key>",
        "prodKey": "<Your Prod Key>"
    },
    "type": "new", // new, render, result
    "render": {
        "ext": "<Input file extension>", // for example glb, blend, fbx
        "expFrom": "<Platform>", // exported from three.js, unity, rest etc
        "bake": false, // Default=false
        "output": "<Output file extension>", // Default=PNG
        "samples": 20, // Default=20
        "quality": 512 // Default=512
    }
}

Fields:

Usage

Step 1 (create job):

{
    "cred": {
        "insID": <Your Ins ID>, // Default=0
        "appKey": "<Your App Key>",
        "prodKey": "<Your Prod Key>"
    },
    "type": "new",
    "render": {
        "ext": "blend",
        "expFrom": "rst",
    }
}

Step 2 (Upload scene):
- Simple use the URL received from last request and call PUT method to upload your scene

Method: PUT
Endpoint: https://app.real-api.online/rapi/.....
Headers: {Content-Type: application/x-www-form-urlencoded}

Set headers “application/x-www-form-urlencoded”

Don’t forget the header `Content-Type: application/x-www-form-urlencoded`

Step 3 (Render job):

{
    "cred": {
        "insID": <Ins ID>,
        "appKey": "<App Key>",
        "prodKey": "<Prod Key>"
    },
    "type": "render",
    "jobID": "<Job ID>"
}

Check status or get result:

For status we can simple ask “status” with jobID

{
    "cred": {
        "insID": <Ins ID>,
        "appKey": "<App Key>",
        "prodKey": "<Prod Key>"
    },
    "type": "result",
    "jobID": "<Job ID>"
}

Job status:

Result:

Three.js:

For details can see three.js docs
The technique is pretty similar to REST methods. But there are some differences such as the way of Area Light, Sunlight and conversion of scene.

Installation

npm install real_api

Usage

Getting render scene:

You can get render-able scene from three.js scene or either any mesh.
Scene is in the form of Binary/Blob

import * as REAL from “real_api”;

// Normal Three.js Scene
const blob = await REAL.Scene(scene, camera);

// Any 3D mesh
const filePath = “test.gltf” // GLTF, GLB, FBX etc
const buffer = await new Promise((resolve, reject) => {
// code for loading local file into buffer
});
const blob = new Blob([buffer], {type: 'application/octet-stream'});

Rendering:

Step 1 (create job):

const uri = `https://${REAL.Domain}/rapi/render`;
const params = {
    "cred": {
        "insID": <Your instance number>,
        "appKey": "<Your app key>",
        "prodKey": "<Your product key>"
    },
    "type": "new",
    "render": {
        "expFrom": "3js"
    }
}
const response = await axios.post(uri, params);

Step 2 (Upload scene):
You can use any native tool for requesting. However I use axios for this example.

const request = await axios.put(uploadUri, blob);

Step 3 (Render job):

const params = {
    "cred": {
        "insID": 0,
        "appKey": "ABC",
        "prodKey": "XYZ"
    },
    "type": "render",
    "jobID": jobID
}
const response = await axios.post(uri, params);

Furthermore, you can use similar way to get your job result (ask = result).

For Unity3D, can visit here
For Babylon.js, can visit here
For Area light, can visit here

Key Highlights:

Runtime Render or Baking:

RealAPI introduces a cutting-edge capability to bake and render scenes dynamically within your application, paving the way for visually captivating, ever-evolving scenes.

Integration Simplified: Our npm package ensures a frictionless onboarding experience, while detailed and accessible documentation accompanies you every step of the way.

Demo Showcase: Witness the power of RealAPI in action through our demonstration videos:

RealAPI: Render or Bake famous 3D tools such as three.js, babylon.js and Unity3D at runtime

Using REST API calls:

Three.js:

Rendering:

Key Highlights:

Any question?

Written by Realistic 3D

No responses yet