0031373: Samples - provide sample combining OCCT and 3 viewer

diff --git a/samples/webgl/WasmOcctView.cpp b/samples/webgl/WasmOcctView.cpp
index 68a8b86bba6dee8001ccf1137f1d20755a322953..7f78ee6b9d2b6d2dec43d9ee6653ea23d9fe7b70 100644 (file)
--- a/samples/webgl/WasmOcctView.cpp
+++ b/samples/webgl/WasmOcctView.cpp
@@ -52,6 +52,14 @@ namespace
     return aDevicePixelRatio;
   });
 
+  /*EM_JS(void, jsSetOcctCamera, (float theFOV, float theAspect, float theNear, float theFar), {
+    setOcctCamera();
+  });*/
+
+  EM_JS(void, jsPostFrameRender, (), {
+    postFrameRender();
+  });
+
   //! Return cavas size in pixels.
   static Graphic3d_Vec2i jsCanvasSize()
   {
@@ -336,7 +344,13 @@ void WasmOcctView::handleViewRedraw (const Handle(AIS_InteractiveContext)& theCt
                                      const Handle(V3d_View)& theView)
 {
   myUpdateRequests = 0;
+
+  theView->Invalidate(); /// Three.js cannot be rendered properly without full redraw
+  glEnable (GL_POLYGON_OFFSET_FILL); /// reset defaults Graphic3d_PolygonOffset after Three.js
+  glPolygonOffset (1.0f, 1.0f);
+
   AIS_ViewController::handleViewRedraw (theCtx, theView);
+  jsPostFrameRender();
   if (myToAskNextFrame)
   {
     // ask more frames

diff --git a/samples/webgl/occt-webgl-sample.html b/samples/webgl/occt-webgl-sample.html
index 80f7e6f4d85f9847a3b5f833e3a65f0027896b9a..fc417b2e8f02f713f41d48a6e1993027a46b8d26 100644 (file)
--- a/samples/webgl/occt-webgl-sample.html
+++ b/samples/webgl/occt-webgl-sample.html
@@ -16,6 +16,7 @@
 <div><label for="fileInput">Choose BREP file to upload: </label><input type="file" id="fileInput" accept=".brep"></div>\r
 <h4>Console output:</h4>\r
 <p id="output"></p>\r
+<script src="three.min.js"></script>\r
 <script>\r
 //! Resize canvas to fit into window.\r
 function updateCanvasSize()\r
@@ -57,6 +58,7 @@ if (!isWasmSupported())
 {\r
   var anElement = document.getElementById('output');\r
   anElement.innerHTML += "Browser is too old - WebAssembly support is missing!<br>Please check updates or install a modern browser.<br>";\r
+  throw new Error();\r
 }\r
 \r
 //! Define OCCT WebGL Viewer module.\r
@@ -76,6 +78,44 @@ var Module =
   })()\r
 };\r
 \r
+var aCanvas = document.getElementById ('canvas');\r
+var aGlCtx  = aCanvas.getContext ('webgl2', { alpha: false, depth: true, antialias: false, preserveDrawingBuffer: true } );\r
+if (aGlCtx == null)\r
+{\r
+  aGlCtx    = aCanvas.getContext ('webgl',  { alpha: false, depth: true, antialias: false, preserveDrawingBuffer: true } );\r
+}\r
+var aScene  = new THREE.Scene();\r
+var aCamera = new THREE.PerspectiveCamera (75, window.innerWidth / window.innerHeight);\r
+//var aRenderer = new THREE.WebGLRenderer ({antialias: true});\r
+var aRenderer = new THREE.WebGLRenderer ({antialias: false, canvas: aCanvas, context: aGlCtx});\r
+aRenderer.autoClear = false;\r
+aRenderer.autoClearColor = false;\r
+aRenderer.autoClearDepth = false;\r
+aRenderer.autoClearStencil = false;\r
+aRenderer.setSize (window.innerWidth,window.innerHeight);\r
+//document.body.appendChild (aRenderer.domElement);\r
+var aGeom = new THREE.BoxGeometry (1,1,1);\r
+var aMat  = new THREE.MeshBasicMaterial ({color: 0xff0000});\r
+var aCube = new THREE.Mesh (aGeom, aMat);\r
+aScene.add (aCube);\r
+aCube.position.z = -5; aCube.rotation.x = 10; aCube.rotation.y = 5;\r
+/*aRenderer.render (aScene, aCamera);\r
+var anAnimate = function(){\r
+  aCube.rotation.x += 0.01;\r
+  aRenderer.state.reset();\r
+  aRenderer.render (aScene, aCamera);\r
+  requestAnimationFrame (anAnimate);\r
+}\r
+anAnimate();*/\r
+\r
+function postFrameRender()\r
+{\r
+  //console.log("postFrameRender()"); ///\r
+  //aCamera.\r
+  aRenderer.state.reset();\r
+  aRenderer.render (aScene, aCamera)\r
+}\r
+\r
 //! Handle file uploading.\r
 fileInput.onchange = function()\r
 {\r