Next-Generation Product Catalogs: Interactive Web Showcases with URDF

As part of our project to explore advanced web technologies, we created and released a showcase that displays URDF data in a browser and animates it smoothly.

Demo site: Web URDF Viewer

Why did a company focused mainly on game and application development become interested in URDF, a standard used in the robotics industry?

In this article, we explain the background and explore new possibilities for presenting products online.

What Is URDF? A Blueprint That Teaches a Robot’s “Brain” About Its Body

URDF, or Unified Robot Description Format, is a common language used to describe the structure of a robot to a computer.

A robot consists of body parts, called “Links,” such as arms and legs, and the “Joints” that connect them. URDF describes where each part is located, which direction it can move, and how far it can move, using XML.

URDF is normally used as specialized data in robot control systems such as ROS, or Robot Operating System, and in physical simulations.

However, we saw strong potential in another aspect of URDF: its ability to define the rules of movement for web content.

Why Use URDF on the Web Now?

We are not robotics specialists. We are an engineering team that works every day to improve the UI and UX of games and applications.

However, as manufacturing and architectural data such as CAD and BIM increasingly move into 3D, we have encountered a new challenge: how should products be presented on the web?

Traditionally, product websites have relied mainly on photographs and videos. More websites now allow users to rotate 3D models, but few let users intuitively experience exactly which parts move and how they move.

By combining URDF with web technologies such as Three.js, we can provide more advanced experiences.

Experience the Range of Motion

Users can operate the model with a mouse to simulate how far a robotic arm can reach or how widely a door can open.

Understand the Structure

Outline rendering and transparent displays can create an engineering-data style appearance, helping users visually understand the product’s internal structure.

Lightweight Performance

Heavy CAD data for manufacturing can be optimized for the web, providing a smooth experience even in a smartphone browser.

Bringing Movement to Life: A Game Developer’s Perspective

Displaying and moving URDF data may be possible for anyone using an existing library. However, different skills are required to give the product a natural character and a comfortable sense of movement.

Poorly configured animations often feel rigid and overly mechanical. One joint moves, pauses, and then the next joint begins moving, creating unnatural gaps.

Using animation techniques developed through game development, we implemented movement that conveys inertia, overlapping motion, and physical weight.

As a result, the product on the screen no longer feels like simple 3D data. It becomes a moving product with a greater sense of physical presence.

Our Proposal: An Interactive Catalog Beyond Photos

For manufacturers and machinery companies, does your website fully communicate the value of your products?

You may want customers to see the smooth movement of a particular joint or understand the benefits of a compact range of motion.

These qualities can be communicated far more effectively through interactive URDF content than through static images or one-way videos.

We can take your CAD data and transform it into a digital twin catalog that moves beautifully and intuitively on the web.

View the Showcase and Contact Us

In the showcase we created, you can see a robotic arm moving smoothly within a design inspired by a futuristic environment.

Demo site: Web URDF Viewer

Please feel free to contact us with questions such as:

“Can our products also be presented through an interactive showcase like this?”

“Can we use our CAD data to create web content?”

Through engineering and creative presentation, we help maximize the value and appeal of your products.