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