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