From f22e19fb3d52ee4360b9f9b33e2d7e900fbe8213 Mon Sep 17 00:00:00 2001
From: Yeicor <4929005+Yeicor@users.noreply.github.com>
Date: Sun, 25 Feb 2024 11:23:11 +0100
Subject: [PATCH] double-sided CAD models

---
 src/models/Model.vue              |  7 ++++++-
 src/tools/Tools.vue               |  3 ++-
 src/viewer/ModelViewerWrapper.vue | 12 ++++++------
 yacv_server/gltf.py               |  2 +-
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/models/Model.vue b/src/models/Model.vue
index ea8b3c2..b85fff6 100644
--- a/src/models/Model.vue
+++ b/src/models/Model.vue
@@ -15,6 +15,7 @@ import {watch} from "vue";
 import type ModelViewerWrapper from "../viewer/ModelViewerWrapper.vue";
 import {mdiCircleOpacity, mdiDelete, mdiRectangle, mdiRectangleOutline, mdiVectorRectangle} from '@mdi/js'
 import SvgIcon from '@jamescoyle/vue-icon/lib/svg-icon.vue';
+import type {WebGLProgramParametersWithUniforms, WebGLRenderer} from "three";
 
 const props = defineProps<{ mesh: Mesh, viewer: InstanceType<typeof ModelViewerWrapper> | null, document: Document }>();
 const emit = defineEmits<{ remove: [] }>()
@@ -85,9 +86,13 @@ function onModelLoad() {
   // of not actually removing the primitives from the scene graph
   sceneModel.traverse((child) => {
     if (child.userData[extrasNameKey] === modelName) {
-      // if (child.type == 'Line') child.material.linewidth = 2; // Not supported in WebGL2
+      // if (child.type == 'Line') {
+      // child.material.linewidth = 3; // Not supported in WebGL2
+      // If wide lines are really needed, we need https://threejs.org/examples/?q=line#webgl_lines_fat
+      // }
       if (child.type == 'Points') {
         child.material.size = 5;
+        child.material.needsUpdate = true;
       }
     }
   });
diff --git a/src/tools/Tools.vue b/src/tools/Tools.vue
index 43980e7..d897fff 100644
--- a/src/tools/Tools.vue
+++ b/src/tools/Tools.vue
@@ -10,7 +10,6 @@ import {
   VToolbarTitle,
   VTooltip,
 } from "vuetify/lib/components";
-import {defineAsyncComponent, ref, Ref} from "vue";
 import OrientationGizmo from "./OrientationGizmo.vue";
 import type {PerspectiveCamera} from "three/src/cameras/PerspectiveCamera";
 import {OrthographicCamera} from "three/src/cameras/OrthographicCamera";
@@ -21,6 +20,7 @@ import type {Intersection} from "three";
 import type {MObject3D} from "./Selection.vue";
 import Loading from "../misc/Loading.vue";
 import type ModelViewerWrapper from "./viewer/ModelViewerWrapper.vue";
+import {defineAsyncComponent, Ref, ref} from "vue";
 
 const SelectionComponent = defineAsyncComponent({
   loader: () => import("./Selection.vue"),
@@ -150,6 +150,7 @@ async function openGithub() {
     <v-tooltip activator="parent">Open GitHub</v-tooltip>
     <svg-icon type="mdi" :path="mdiGithub"/>
   </v-btn>
+  <div ref="statsHolder"></div>
 </template>
 
 <!--suppress CssUnusedSymbol -->
diff --git a/src/viewer/ModelViewerWrapper.vue b/src/viewer/ModelViewerWrapper.vue
index 5bcd691..ff208d4 100644
--- a/src/viewer/ModelViewerWrapper.vue
+++ b/src/viewer/ModelViewerWrapper.vue
@@ -4,18 +4,16 @@
 <script setup lang="ts">
 import {settings} from "../misc/settings";
 import {onMounted} from "vue";
-import {$scene} from "@google/model-viewer/lib/model-viewer-base";
+import {$scene, $renderer} from "@google/model-viewer/lib/model-viewer-base";
 import Loading from "../misc/Loading.vue";
 import {ref} from "vue";
 import {ModelViewerElement} from '@google/model-viewer';
 import type {ModelScene} from "@google/model-viewer/lib/three-components/ModelScene";
+import type {Renderer} from "@google/model-viewer/lib/three-components/Renderer";
 
 ModelViewerElement.modelCacheSize = 0; // Also needed to avoid tree shaking
 
-const emit = defineEmits<{
-  // noinspection ThisExpressionReferencesGlobalObjectJS
-  load: []
-}>()
+const emit = defineEmits<{ load: [] }>()
 
 const props = defineProps({
   src: String
@@ -23,7 +21,8 @@ const props = defineProps({
 
 const elem = ref<ModelViewerElement | null>(null);
 const scene = ref<ModelScene | null>(null);
-defineExpose({elem, scene});
+const renderer = ref<Renderer | null>(null);
+defineExpose({elem, scene, renderer});
 
 onMounted(() => {
   elem.value.addEventListener('load', () => {
@@ -34,6 +33,7 @@ onMounted(() => {
       if (banner) banner.remove();
       // Set the scene
       scene.value = elem.value[$scene] as ModelScene;
+      renderer.value = elem.value[$renderer] as Renderer;
       // Emit the load event
       emit('load')
     }
diff --git a/yacv_server/gltf.py b/yacv_server/gltf.py
index a087850..afead89 100644
--- a/yacv_server/gltf.py
+++ b/yacv_server/gltf.py
@@ -55,7 +55,7 @@ class GLTFMgr:
         new_material: Material
         if kind == "face":
             new_material = Material(name="face", alphaCutoff=None, pbrMetallicRoughness=PbrMetallicRoughness(
-                baseColorTexture=TextureInfo(index=0), baseColorFactor=[1, 1, 0.5, 1]))
+                baseColorTexture=TextureInfo(index=0), baseColorFactor=[1, 1, 0.5, 1]), doubleSided=True)
         elif kind == "edge":
             new_material = Material(name="edge", alphaCutoff=None, pbrMetallicRoughness=PbrMetallicRoughness(
                 baseColorFactor=[0, 0, 0.5, 1]))