a34bddcf |
1 | <!DOCTYPE html> |
2 | <html lang=en-us> |
3 | <head> |
4 | <meta charset=utf-8><meta content="text/html; charset=utf-8" http-equiv=Content-Type> |
5 | <link rel="shortcut icon" href="lamp.ico" type="image/x-icon" /> |
6 | <title>OCCT WebGL Viewer Sample</title> |
7 | </head> |
8 | <body> |
9 | |
10 | <h2>OCCT WebGL Viewer Sample</h2> |
11 | <div> |
12 | <canvas id=occViewerCanvas oncontextmenu=event.preventDefault() tabindex=-1 style="border:0 none;background-color:#000" width="409" height="409"></canvas> |
13 | <img id=occlogo src="OCC_logo.png" style="position: absolute; left: 20px; top: 0px; z-index: 2;" /> |
14 | </div> |
15 | |
16 | <div> |
17 | <label for="fileInput">Choose BREP file to upload: </label><input type="file" id="fileInput" accept=".brep"> |
18 | <input type="button" value="Clear All" onclick="OccViewerModule.removeAllObjects()"> |
19 | <input type="button" value="Fit All" onclick="OccViewerModule.fitAllObjects(true)"> |
20 | </div> |
21 | <h4>Console output:</h4> |
22 | <p id="output"></p> |
23 | <script> |
24 | //! Resize canvas to fit into window. |
25 | function updateCanvasSize() |
26 | { |
27 | // size of canvas in logical (density-independent) units |
28 | var aSizeX = Math.min (window.innerWidth, window.screen.availWidth); |
29 | var aSizeY = Math.min (window.innerHeight, window.screen.availHeight); |
30 | aSizeX = Math.max (300, aSizeX - 30); |
31 | aSizeY = Math.max (300, aSizeY / 2); |
32 | occViewerCanvas.style.width = aSizeX + "px"; |
33 | occViewerCanvas.style.height = aSizeY + "px"; |
34 | |
35 | // drawing buffer size (aka backing store) |
36 | var aDevicePixelRatio = window.devicePixelRatio || 1; |
37 | occViewerCanvas.width = aSizeX * aDevicePixelRatio; |
38 | occViewerCanvas.height = aSizeY * aDevicePixelRatio; |
39 | |
40 | occlogo.style.top = (aSizeY - 30) + "px"; |
41 | } |
42 | window.onresize = updateCanvasSize; |
43 | updateCanvasSize(); |
44 | |
5f69cfa7 |
45 | // capture keyboard input on mouse click |
46 | occViewerCanvas.tabIndex = -1; |
47 | occViewerCanvas.onclick = (theEvent) => { occViewerCanvas.focus() }; |
48 | occViewerCanvas.focus(); |
49 | |
a34bddcf |
50 | //! Check browser support. |
51 | function isWasmSupported() |
52 | { |
53 | try { |
54 | if (typeof WebAssembly === "object" |
55 | && typeof WebAssembly.instantiate === "function") { |
56 | const aDummyModule = new WebAssembly.Module (Uint8Array.of (0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00)); |
57 | if (aDummyModule instanceof WebAssembly.Module) |
58 | { |
59 | return new WebAssembly.Instance(aDummyModule) instanceof WebAssembly.Instance; |
60 | } |
61 | } |
62 | } catch (e) {} |
63 | return false; |
64 | } |
65 | if (!isWasmSupported()) |
66 | { |
67 | var anElement = document.getElementById('output'); |
68 | anElement.innerHTML += "Browser is too old - WebAssembly support is missing!<br>Please check updates or install a modern browser.<br>"; |
69 | } |
70 | |
71 | //! Handle file uploading. |
72 | fileInput.onchange = function() |
73 | { |
74 | if (fileInput.files.length == 0) { return; } |
75 | // Warning! Entire file is pre-loaded into memory. |
76 | var aFile = fileInput.files[0]; |
77 | var aReader = new FileReader(); |
78 | aReader.onload = function() |
79 | { |
80 | var aDataArray = new Uint8Array (aReader.result); |
81 | const aDataBuffer = OccViewerModule._malloc (aDataArray.length); |
82 | OccViewerModule.HEAPU8.set (aDataArray, aDataBuffer); |
83 | OccViewerModule.openFromMemory (aFile.name, aDataBuffer, aDataArray.length, true); |
84 | //OccViewerModule._free (aDataBuffer); will be freed by called method |
85 | OccViewerModule.displayGround (true); |
5f69cfa7 |
86 | occViewerCanvas.focus(); |
a34bddcf |
87 | }; |
88 | aReader.readAsArrayBuffer(aFile); |
89 | }; |
90 | </script> |
91 | <script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script> |
92 | </body> |
93 | </html> |