How to Achieve High‑Performance Realistic Rendering on Mobile Devices

Real‑time Rendering vs. Offline Rendering

In a 3D world, realism boosts user retention; real‑time rendering must run at 60 FPS (≈16 ms per frame) unlike offline rendering that can take hours per frame.

Speed : Real‑time requires a balance between performance and visual quality.

Physical Accuracy : Materials must obey light absorption, reflection, refraction, metallic‑roughness, and energy conservation.

Ecosystem : Front‑end‑friendly pipelines integrate standards such as glTF, C4D, and Blender.

Ease of Use : Engine frameworks hide complex rendering pipelines, enabling rapid development.

Mobile devices cannot yet match cinematic offline quality, which historically required thousands of servers and millions of CPU‑hours per frame.

How to Boost Realism with High Performance

Mobile constraints demand extreme performance while improving visual fidelity.

Material Models

Two common mobile material models:

Unlit : Fast, uses pre‑baked textures, but lacks dynamic lighting response.

PBR : Uses metallic‑roughness properties for realistic shading and reacts to global illumination.

Rendering Equation

Solving the full rendering equation is infeasible on mobile; instead, approximations like the Cook‑Torrance model compute diffuse and specular components per pixel.

Diffuse – Spherical‑Harmonic Baking

Environment cubemaps (skyboxes) are sampled hemispherically; low‑frequency lighting is encoded using 3‑order spherical‑harmonic coefficients (9 values) for efficient runtime reconstruction.

Specular – Pre‑filtered Environment Maps

Specular reflections are pre‑baked for multiple roughness levels and stored as mip‑mapped textures, forming a pre‑filtered environment map.

Art Assets

Normal, roughness, and shadow maps add detail; normal maps provide per‑pixel surface orientation for bump effects.

HDR Color Space

HDR textures preserve high‑dynamic‑range lighting, retaining detail in bright areas unlike LDR (0‑1 range) images.

Beyond Basic Materials

Advanced effects such as subsurface scattering for skin or jade require additional algorithms beyond simple diffuse/specular models.

Oasis Engine Workflow

Oasis is a mobile‑first, high‑performance web graphics engine with component‑based design and a rich front‑end ecosystem, allowing developers without deep graphics knowledge to start quickly.

The online editor lets users drag‑and‑drop glTF/FBX models, apply HDR environment maps (auto‑baked), edit materials, and export projects to web or mini‑program platforms. Artists can refine textures with tools like Substance Painter, and developers can add custom scripts.

Online Tools

The Oasis website offers an IBL‑Baker to generate HDR environment maps, spherical‑harmonic baked data, and pre‑filtered maps directly from uploaded HDRIs.

engine.resourceManager
  .load<AmbientLight>({
    type: AssetType.Env,
    url: "***.env"
  })
  .then((ambientLight) => {
    scene.ambientLight = ambientLight;
  });

Future Outlook

Future work includes collaborative cloud rendering, real‑time ray tracing via WebGPU, and expanding algorithmic choices to further close the gap between performance and realism.