80f7e6f4d85f9847a3b5f833e3a65f0027896b9a
[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   },\r
73   canvas: (function() {\r
74     var aCanvas = document.getElementById('canvas');\r
75     return aCanvas;\r
76   })()\r
77 };\r
78 \r
79 //! Handle file uploading.\r
80 fileInput.onchange = function()\r
81 {\r
82   if (fileInput.files.length == 0) { return; }\r
83   // Warning! Entire file is pre-loaded into memory.\r
84   var aFile = fileInput.files[0];\r
85   var aReader = new FileReader();\r
86   aReader.onload = function()\r
87   {\r
88     var aDataArray = new Uint8Array (aReader.result);\r
89     var aNameArray = new Uint8Array (toUtf8Array (aFile.name));\r
90     const aDataBuffer = Module._malloc(aDataArray.length);\r
91     const aNameBuffer = Module._malloc(aNameArray.length);\r
92     Module.HEAPU8.set(aNameArray, aNameBuffer);\r
93     Module.HEAPU8.set(aDataArray, aDataBuffer);\r
94     Module.ccall('onFileDataRead', null, ['number', 'number', 'number'], [aNameBuffer, aDataBuffer, aDataArray.length]);\r
95     Module._free(aDataBuffer);\r
96     Module._free(aNameBuffer);\r
97     fileInput.value = '';\r
98   };\r
99   aReader.readAsArrayBuffer(aFile);\r
100 };\r
101 \r
102 //! Convert string into UTF-8 array.\r
103 function toUtf8Array (theText)\r
104 {\r
105   var aRes = [];\r
106   for (var aCharIter = 0; aCharIter < theText.length; ++aCharIter)\r
107   {\r
108     var aCharCode = theText.charCodeAt (aCharIter);\r
109     if (aCharCode < 0x80)\r
110     {\r
111       aRes.push (aCharCode);\r
112     }\r
113     else if (aCharCode < 0x800)\r
114     {\r
115       aRes.push (0xc0 | (aCharCode >> 6), 0x80 | (aCharCode & 0x3f));\r
116     }\r
117     else if (aCharCode < 0xd800 || aCharCode >= 0xe000)\r
118     {\r
119       aRes.push (0xe0 | (aCharCode >> 12), 0x80 | ((aCharCode>>6) & 0x3f), 0x80 | (aCharCode & 0x3f));\r
120     }\r
121     else\r
122     {\r
123       ++aCharIter;\r
124       aCharCode = 0x10000 + (((aCharCode & 0x3ff)<<10) | (theText.charCodeAt (aCharIter) & 0x3ff));\r
125       aRes.push(0xf0 | (aCharCode >>18), 0x80 | ((aCharCode>>12) & 0x3f), 0x80 | ((aCharCode>>6) & 0x3f), 0x80 | (aCharCode & 0x3f));\r
126     }\r
127   }\r
128   return aRes;\r
129 }\r
130 </script>\r
131 <script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script>\r
132 </body>\r
133 </html>\r