Check out the software architecture for Autodesk Forge.
The Autodesk technology that was once known as the "Large Model Viewer" (because it handles 3D models larger than Autodesk Design Review) is the same viewing technology that is now called the Autodesk Forge Viewer. The viewer consumes a Simple Vector Format (SVF) file and converts it to WebGL (Web Graphics Library) for the browser to display, This offers the advantage that the browser user does not have to download and install any additional plug-ins. Throughout the years, we've heard from customers that downloading and installing Autodesk Design Review can be a challenge as some users do not have administrative rights on their machines. In addition, Autodesk Design Review is Microsoft Windows-only. The Autodesk Forge Viewer supports browsers that can consume WebGL independent of operating system. So let's talk a little about WebGL.
"WebGL is a JavaScript Application Program Interface (API) for rendering 3D graphics within any compatible web browser without the use of plug-ins. WebGL is integrated completely into all the web standards of the browser allowing GPU accelerated usage of physics and image processing and effects as part of the web page canvas. WebGL elements can be mixed with other HTML elements and composited with other parts of the page or page background. WebGL programs consist of control code written in JavaScript and shader code that is written in the OpenGL Shading Language (GLSL), a language similar to C or C++, and is executed on a computer's graphics processing unit (GPU). WebGL is designed and maintained by the non-profit Khronos Group." [wikipedia]
Three.js is a lightweight cross-browser JavaScript library/API used to create and display animated 3D computer graphics in a web browser. Three.js scripts can be used in conjunction with the HTML5 canvas element, SVG, or WebGL.
Here is some code that I copied and modified from the threejs.org site:
<html>
<head>
<title>My first three.js app</title>
<style> body { margin: 0; } canvas { width: 100%; height: 100% } </style>
</head>
<body>
<script src="three.js"></script>
<script>
var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth/window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
var box_geometry = new THREE.BoxGeometry( 1, 0.5, 3 );
var box_material = new THREE.MeshBasicMaterial( { color: 0xff0000 } );
var box = new THREE.Mesh( box_geometry, box_material );
scene.add( box );
var cube_geometry = new THREE.BoxGeometry( 1, 1, 1 );
var cube_material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } );
var cube = new THREE.Mesh( cube_geometry, cube_material );
scene.add( cube );
camera.position.z = 5;
var render = function () {
requestAnimationFrame( render );
box.rotation.x += 0.01;
box.rotation.y += 0.01;
cube.rotation.x += 0.1;
cube.rotation.y += 0.1;
renderer.render( scene, camera );
};
render();
</script>
</body>
</html>
The code is very readable. The hard work is done by the 43,684 lines of JavaScript in the three.js library. For my part, it's pretty simple to see that:
- Three.js allows me to create a scene, a camera, and a renderer.
- Three.js allows me to create a red box that is 1x0.5x3.
- Three.js allows me to create a green cube that is 1x1x1.
- Three.js allows me to rotate the box, rotate the cube (10x faster), and update the display.
So you can see the result in action, I have posted it, along with the three.js library, to my blog:
View the page at http://labs.blogs.com/threejs/example.html
This is all done by me with a few lines of HTML and JavaScript. Though simple in nature, the problem with using this approach for CAD data is the volume of data. It's a challenge to get performance when programming in this way. The Autodesk Forge Viewer uses special care when creating WebGL from SVF. The viewer converts the data to 32-bit float precision using relative coordinates with global offsets and does some run-time compression of normal vectors and mesh consolidation. The consolidation is done in a way such that users can still select/query all the individual elements of the original design model. As such, the processing improves the display speed and interactivity but does not lose identity information.
Graphics are alive in the lab.
Subscribe
Facebook
Twitter
LinkedIn
Instagram