0031668: Visualization - WebGL sample doesn't work on Emscripten 1.39
[occt.git] / samples / webgl / occt-webgl-sample.html
CommitLineData
565baee6 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
21function 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
38window.onresize = updateCanvasSize;\r
39updateCanvasSize();\r
40\r
41//! Check browser support.\r
42function 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
56if (!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
63var 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
7465bfa6 72 console.warn(theText);\r
565baee6 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
81fileInput.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
7465bfa6 89 var aNameLenBytes = lengthBytesUTF8(aFile.name) + 1;\r
90 const aNameBuffer = Module._malloc(aNameLenBytes);\r
91 stringToUTF8(aFile.name, aNameBuffer, aNameLenBytes);\r
92\r
565baee6 93 var aDataArray = new Uint8Array (aReader.result);\r
565baee6 94 const aDataBuffer = Module._malloc(aDataArray.length);\r
565baee6 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
565baee6 103</script>\r
104<script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script>\r
105</body>\r
106</html>\r