[occt.git] / samples / webgl / occt-webgl-sample.html

<!DOCTYPE html>
<html lang=en-us>
<head>
<meta charset=utf-8><meta content="text/html; charset=utf-8" http-equiv=Content-Type>
<link rel="shortcut icon" href="lamp.ico" type="image/x-icon" />
<title>OCCT WebGL Viewer Sample</title>
</head>
<body>

<h2>OCCT WebGL Viewer Sample</h2>
<div>
  <canvas id=occViewerCanvas oncontextmenu=event.preventDefault() tabindex=-1 style="border:0 none;background-color:#000" width="409" height="409"></canvas>
  <img id=occlogo src="OCC_logo.png" style="position: absolute; left: 20px; top: 0px; z-index: 2;" />
</div>

<div>
  <label for="fileInput">Choose BREP file to upload: </label><input type="file" id="fileInput" accept=".brep">
  <input type="button" value="Clear All" onclick="OccViewerModule.removeAllObjects()">
  <input type="button" value="Fit All"   onclick="OccViewerModule.fitAllObjects(true)">
</div>
<h4>Console output:</h4>
<p id="output"></p>
<script>
//! Resize canvas to fit into window.
function updateCanvasSize()
{
  // size of canvas in logical (density-independent) units
  var aSizeX = Math.min (window.innerWidth,  window.screen.availWidth);
  var aSizeY = Math.min (window.innerHeight, window.screen.availHeight);
  aSizeX = Math.max (300, aSizeX - 30);
  aSizeY = Math.max (300, aSizeY / 2);
  occViewerCanvas.style.width  = aSizeX + "px";
  occViewerCanvas.style.height = aSizeY + "px";

  // drawing buffer size (aka backing store)
  var aDevicePixelRatio = window.devicePixelRatio || 1;
  occViewerCanvas.width  = aSizeX * aDevicePixelRatio;
  occViewerCanvas.height = aSizeY * aDevicePixelRatio;

  occlogo.style.top = (aSizeY - 30) + "px";
}
window.onresize = updateCanvasSize;
updateCanvasSize();

// capture keyboard input on mouse click
occViewerCanvas.tabIndex = -1;
occViewerCanvas.onclick = (theEvent) => { occViewerCanvas.focus() };
occViewerCanvas.focus();

//! Check browser support.
function isWasmSupported()
{
  try {
    if (typeof WebAssembly === "object"
     && typeof WebAssembly.instantiate === "function") {
      const aDummyModule = new WebAssembly.Module (Uint8Array.of (0x0, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00));
      if (aDummyModule instanceof WebAssembly.Module)
      {
        return new WebAssembly.Instance(aDummyModule) instanceof WebAssembly.Instance;
      }
    }
  } catch (e) {}
  return false;
}
if (!isWasmSupported())
{
  var anElement = document.getElementById('output');
  anElement.innerHTML += "Browser is too old - WebAssembly support is missing!<br>Please check updates or install a modern browser.<br>";
}

//! Handle file uploading.
fileInput.onchange = function()
{
  if (fileInput.files.length == 0) { return; }
  // Warning! Entire file is pre-loaded into memory.
  var aFile = fileInput.files[0];
  var aReader = new FileReader();
  aReader.onload = function()
  {
    var aDataArray = new Uint8Array (aReader.result);
    const aDataBuffer = OccViewerModule._malloc (aDataArray.length);
    OccViewerModule.HEAPU8.set (aDataArray, aDataBuffer);
    OccViewerModule.openFromMemory (aFile.name, aDataBuffer, aDataArray.length, true);
    //OccViewerModule._free (aDataBuffer); will be freed by called method
    OccViewerModule.displayGround (true);
    occViewerCanvas.focus();
  };
  aReader.readAsArrayBuffer(aFile);
};
</script>
<script type="text/javascript" src="occt-webgl-sample.js" charset="utf-8"></script>
</body>
</html>
Commit	Line	Data
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>