How 2.5D Graphics Are Revolutionizing Front‑End Development for Industrial IoT

In early 2021 Alibaba Cloud’s IoT team launched the Digital Space plan, aiming to reduce development cost, shorten cycles, and improve experience for industry applications by using 2.5D graphics and data visualization.

What Is 2.5D?

2.5D creates a three‑dimensional visual effect using two‑dimensional elements. It originated in early games such as Red Alert, The Legend of Sword and Fairy, Monument Valley, Warcraft, and many others, and is still widely recognized.

Why Use 2.5D in 2021?

Although 3D is now common, 2.5D offers a unique niche for the industrial internet: lower cost, high performance on modest hardware, and the ability to retain spatial relationships while visualizing real‑time data.

“The hardest part of industrial‑internet transformation is the diversity of data usage across different sectors.” – Xiaoyaozi

Industry Internet Challenges

Developer Perspective

High cost : Complex models, varied logic across industries, repetitive low‑efficiency development.

Lack of specialization : Front‑end components are generic, requiring extensive customization.

Frequent changes : Strongly targeted requirements lead to low ROI.

Small user base : Applications often serve only dozens to hundreds of users.

User Perspective

Poor usability : Too many configuration options, high learning curve, sluggish UI.

Cost‑ineffective : Long development cycles make Excel seem more convenient.

Limited value : Visualizations are used only for occasional reporting.

2.5D Implementation in the Front‑End

Design Style: Isometric View

From a graphics standpoint, 2.5D usually refers to isometric projection, which displays three axes on a single plane and mimics human visual habits.

Technology Selection: Canvas

We evaluated three approaches:

CSS+JS : Uses transform:rotate to draw five faces; simple but limited for complex interactions.

SVG : Highly customizable via XML DOM, but development cost is high for large‑scale 2.5D scenes.

Canvas : JavaScript‑driven 2D drawing with GPU acceleration, mature ecosystem, and strong performance.

Canvas was chosen as the final solution.

CSS+JS Prototype

#platform {</code><code>  width: 500px;</code><code>  height: 500px;</code><code>  transform: rotateX(20deg) rotateZ(30deg) rotateY(0deg);</code><code>}</code><code>#platform b {</code><code>  height: 100%;</code><code>  background-color: rgba(176, 208, 223, 0.9);</code><code>  transform: rotateX(90deg);</code><code>  transform-origin: 0 0;</code><code>}</code><code>#platform b > b {</code><code>  background-color: rgba(128, 174, 197, 0.9);</code><code>  transform: rotateY(90deg);</code><code>}

Canvas Prototype

function CreateCube(platform, height, top, left, name, w, h) {</code><code>  var cube = document.createElement("div");</code><code>  if (name !== null) { cube.id = name; }</code><code>  cube.style.height = height + "px";</code><code>  cube.style.top = top + "px";</code><code>  cube.style.left = left + "px";</code><code>  platform.appendChild(cube);</code><code>  var b1 = document.createElement("b");</code><code>  b1.style.backgroundImage = "url(./images/steve3.jpg)";</code><code>  b1.style.width = w + "px";</code><code>  cube.appendChild(b1);</code><code>  // ... create remaining faces b2‑b5 and i</code><code>}

Calling CreateCube(platform, 300, 0, 0, null, 100, 100) generates a five‑face shape that can be rotated to simulate 3D.

Graphics Embedding Method

The simplest approach embeds pre‑rendered 2.5D images into Canvas, focusing development on shadows, animations, and interactions while keeping rendering cheap.

Stage 1: Capture 3D models at a fixed angle to produce 2.5D assets.

Stage 2: Use a Photoshop plug‑in (“2.5D Generator”) to convert flat images to 2.5D.

Stage 3: Research algorithms that compute 2D‑to‑2.5D vertex transformations.

Component Design for Industrial Scenes

Model Component

Essentially an Image component that must handle cross‑origin loading and performance of many images on Canvas.

module.exports = function useImage(url, crossOrigin) {</code><code>  var res = React.useState(defaultState);</code><code>  var image = res[0].image;</code><code>  var status = res[0].status;</code><code>  var setState = res[1];</code><code>  React.useEffect(function () {</code><code>    if (!url) return;</code><code>    var img = document.createElement('img');</code><code>    function onload() { setState({ image: img, status: 'loaded' }); }</code><code>    function onerror() { setState({ image: undefined, status: 'failed' }); }</code><code>    img.addEventListener('load', onload);</code><code>    img.addEventListener('error', onerror);</code><code>    if (crossOrigin) img.crossOrigin = crossOrigin;</code><code>    img.src = url;</code><code>    return function cleanup() {</code><code>      img.removeEventListener('load', onload);</code><code>      img.removeEventListener('error', onerror);</code><code>      setState(defaultState);</code><code>    };</code><code>  }, [url, crossOrigin]);</code><code>  return [image, status];</code><code>};

Pipeline Component

Handles angle correction and water‑flow effects for industrial pipelines.

function getAngle(p1, p2, mode = 'fixed', perspective = 58) {</code><code>  var diff_x = p2.x - p1.x;</code><code>  var diff_y = p2.y - p1.y;</code><code>  let angle = (360 * Math.atan(diff_y / diff_x)) / (2 * Math.PI);</code><code>  let quadrant = 0;</code><code>  if (p2.x < p1.x && p2.y < p1.y) quadrant = 1;</code><code>  else if (p2.x > p1.x && p2.y < p1.y) quadrant = 2;</code><code>  else if (p2.x > p1.x && p2.y > p1.y) quadrant = 3;</code><code>  else if (p2.x < p1.x && p2.y > p1.y) quadrant = 4;</code><code>  let fixedAngle = -0;</code><code>  switch (quadrant) {</code><code>    case 1: angle += 90; fixedAngle = angle > 165 ? 180 : 180 - perspective; break;</code><code>    case 2: angle -= 90; fixedAngle = angle < -165 ? 180 : perspective - 180; break;</code><code>    case 3: angle -= 90; fixedAngle = angle > -15 ? 0 : -perspective; break;</code><code>    case 4: angle += 90; fixedAngle = angle < 15 ? 0 : perspective; break;</code><code>  }</code><code>  return fixedAngle;</code><code>}

Water‑flow is achieved by drawing three layers (outer wall, inner wall, flow) and animating the dash offset:

ctx.strokeStyle = '#094FE6';</code><code>ctx.setLineDash([5 * 0.3, 5]);</code><code>ctx.lineDashOffset = mapRange(t, 0, 1, 0, -l * 0.7);

Conclusion

After extensive testing of several Canvas libraries (Hilojs, Konva, Pixi.js, Cocos2d, fabricjs, snap.svg) and 3D engines, Konva was selected as the foundation for Digital Space’s 2.5D implementation due to its Canvas‑based architecture, performance, and React support.

2.5D provides a cost‑effective, high‑performance visual layer for industrial IoT scenarios, enabling customizable, data‑driven visualizations while keeping hardware requirements low.