Exploring the Power of ODA Viewer: A Comprehensive Guide

Open Design Alliance is an organization that creates software development kits (SDKs) for engineering applications. ODA offers interoperability tools for CAD, BIM, and Mechanical industries including different CAD drawing formats like .dwg, .dxf,.dng,.ifc and Autodesk Revit files and additional tools for visualization, web development, 3D PDF publishing and modeling.

ODA Viewer incorporates the power and flexibility of ODA into a single web application that can visualize all ODA supported file formats and illustrate other visualize-related features like visual styles and markup. Basically it converts files existing format to viewer understanding format which is .vsf.

• Access: Access properties, geometry and model hierarchy from open and proprietary engineering formats.
• Create/Edit: Create and edit complex engineering data with convenient cross-platform APIs.
• Visualize: Visualize any ODA-supported format on desktop, mobile or cloud.
• Render: Renders complex CAD and BIM models to high-quality weather they are 2D or 3D.
• Viewer API: It comes with Highly developed API.

• ODA has provided section-wise APIs of different classes, along with their properties and functions. By referring to this documentation, you can gain comprehensive development-related knowledge, which will enable you to create a basic viewer with essential features efficiently.
• Additionally, they have provided some basic examples to guide you. By utilizing these examples as a foundation, you can create a sample viewer with essential functionalities. This will mark the beginning of your ODA viewer journey, helping you familiarize yourself with the viewer’s capabilities and how to implement various features.
• Moreover, there is a pre-developed full-fledged viewer available in their SDK. You can refer to this viewer, which has been built using client.js, to help you manage your project workflow effectively. While it may not directly assist with API-related information, it can provide valuable insights into how to structure your project and handle various aspects of viewer development. Leveraging this resource will undoubtedly aid you in achieving a more organized and successful project implementation. Moreover, there is a pre-developed full-fledged viewer available in their SDK. You can refer to this viewer, which has been built using client.js, to help you manage your project workflow effectively. While it may not directly assist with API-related information, it can provide valuable insights into how to structure your project and handle various aspects of viewer development. Leveraging this resource will undoubtedly aid you in achieving a more organized and successful project implementation.

Note : Before accessing and running the above viewer, there are certain prerequisites that need to be fulfilled. To facilitate this process, I have created a comprehensive and descriptive documentation. This documentation includes step-by-step instructions for installation and setting up the ODA project. By referring to this detailed guide, developers can easily navigate through the initial setup phase and be well-prepared to run their projects seamlessly.

By the instructions provided above, you can start building your ODA viewer and begin your initial journey into the world of ODA viewer development. Whether you choose Bebylon JavaScript or React.js as your framework, you have the necessary resources and preferences to kickstart your project.

Create instance of VisualizeJS module object :

const lib = props.viewerData.getVisualizeLibInst(options);

Initiate viewer : 

 function setCanvasSize(width, height) {

canvas.height = height;

        canvas.width = width;

      }

      setCanvasSize(canvas.clientWidth, canvas.clientHeight);

      lib.canvas = canvas;

      lib.Viewer.initRender(canvas.clientWidth, canvas.clientHeight, true);

And create object of viewer for further use :

viewer = lib.Viewer.create();

Resize function : 

(Reason I am suggesting you to use this code as on this your main features like selection and measurement depends, These feature will not work properly if you not set up resize window function properly)

(Also call this resize function in the render function. I know it will put overhead on your rendering but still this is the solution I have right now you can optimize it to your personal extent is up to you.)

var rect = lib.canvas.getBoundingClientRect();
lib.canvas.width = lib.canvas.clientWidth * window.devicePixelRatio;
lib.canvas.height = lib.canvas.clientHeight * window.devicePixelRatio;
viewer.resize(0, lib.canvas.width, lib.canvas.height, 0);
viewer.update();

Load model into the viewer :

fetch(“https://opencloud.azureedge.net/examples/iveco.dwg.vsf”)

.then((response) => response.arrayBuffer())
.then((buffer) => {
document.querySelector(“.loader”).style.display = “none”;
viewer.clear();
viewer.parseFile(new Uint8Array(buffer));
viewer.zoomExtents();
viewer.activeView.enableDefaultLighting(
false,
lib.DefaultLightingType.kOneLight
);
viewer.shadows = false;
viewer.fxaaAntiAliasing3d = false;
})
.catch((err) => console.log(err));

Animate function: 

function render() {

  resize();

        viewer.update();

        requestAnimationFrame(render);

      }

      render();

Sample Image of viewer :

The Open Design Alliance (ODA) Viewer serves as a software application specifically created to facilitate the viewing and interaction with diverse CAD file formats. This application presents an alternative to proprietary CAD software by allowing users to view and analyze CAD files.

The ODA Viewer stands as a valuable solution catering to both individuals and organizations in search of an economical and adaptable approach to visualizing and exchanging CAD designs in various formats. It actively encourages collaboration, diminishes reliance on specific software, and offers an accessible platform for individuals requiring CAD file reviews without necessitating advanced design proficiencies.