Merge pull request #1211 from NicoPennec/feat/wireframe

Wireframe mode on 3D model
cgwire · Oct 6, 2023 · 70c007a · 70c007a
2 parents 3387423 + b184f12
commit 70c007a
Show file tree

Hide file tree

Showing 5 changed files with 70 additions and 7 deletions.
diff --git a/src/components/previews/ObjectViewer.vue b/src/components/previews/ObjectViewer.vue
@@ -17,6 +17,8 @@
       :environment-image="backgroundUrl"
       :skybox-image="isEnvironmentSkybox ? backgroundUrl : ''"
       :src="previewUrl"
+      :variant-name="isWireframe ? 'variant-wireframe' : null"
+      @before-render="createWireframeVariant($event.target.model)"
     />
   </div>
 </template>
@@ -50,6 +52,41 @@ export default {
     isEnvironmentSkybox: {
       default: false,
       type: Boolean
+    },
+    isWireframe: {
+      default: false,
+      type: Boolean
+    }
+  },
+
+  methods: {
+    /**
+     * Create a wireframe variant of each material of a 3D model
+     * @param {Model} model - model from model-viewer component
+     */
+    createWireframeVariant(model) {
+      const maxIndex = model.materials.length
+      for (let i = 0; i < maxIndex; i++) {
+        const variantMaterial = model.createMaterialInstanceForVariant(
+          i,
+          `material-wireframe-${i}`,
+          'variant-wireframe',
+          this.isWireframe
+        )
+        if (!variantMaterial) {
+          continue
+        }
+        const texture = variantMaterial.normalTexture
+        const materialsSymbol = Object.getOwnPropertySymbols(texture).find(
+          symbol => symbol.description === 'materials'
+        )
+        const materials = texture[materialsSymbol]
+        materials.forEach(material => {
+          material.wireframe = true
+          material.emissive.setHex(0xc0c0c0)
+          material.envMapIntensity = 0
+        })
+      }
     }
   }
 }

diff --git a/src/components/previews/PreviewPlayer.vue b/src/components/previews/PreviewPlayer.vue
@@ -40,25 +40,26 @@
               :default-height="defaultHeight"
               :is-big="big"
               :is-comparing="isComparing && isComparisonEnabled"
+              :is-comparison-overlay="isComparisonOverlay"
               :is-environment-skybox="isEnvironmentSkybox"
               :is-full-screen="fullScreen"
-              :is-object-background="isObjectBackground"
-              :is-light="light"
               :is-hd="isHd"
+              :is-light="light"
               :is-muted="isMuted"
+              :is-object-background="isObjectBackground"
               :is-ordering="isOrdering"
               :is-repeating="isRepeating"
-              :is-comparison-overlay="isComparisonOverlay"
+              :is-wireframe="isWireframe"
               :margin-bottom="marginBottom"
               :object-background-url="objectBackgroundUrl"
               :preview="currentPreview"
               :style="{
                 position: isComparisonOverlay ? 'absolute' : 'static'
               }"
               @duration-changed="changeMaxDuration"
+              @frame-update="updateFrame"
               @play-ended="pause"
               @size-changed="fixCanvasSize"
-              @frame-update="updateFrame"
               @video-end="onVideoEnd"
               @video-loaded="onVideoLoaded"
             />
@@ -360,17 +361,26 @@
             <button-simple
               class="flexrow-item"
               :active="isObjectBackground"
+              :disabled="!objectBackgroundUrl"
               icon="globe"
               :title="$t('playlists.actions.toggle_object_background')"
               @click="isObjectBackground = !isObjectBackground"
             />
             <button-simple
               class="flexrow-item"
-              :active="isEnvironmentSkybox"
+              :active="isObjectBackground && isEnvironmentSkybox"
+              :disabled="!objectBackgroundUrl || !isObjectBackground"
               icon="image"
               :title="$t('playlists.actions.toggle_environment_skybox')"
               @click="isEnvironmentSkybox = !isEnvironmentSkybox"
             />
+            <button-simple
+              class="flexrow-item"
+              :active="isWireframe"
+              icon="codepen"
+              :title="$t('playlists.actions.toggle_wireframe')"
+              @click="isWireframe = !isWireframe"
+            />
             <input
               ref="object-background-input-file"
               accept=".hdr"
@@ -594,7 +604,7 @@ export default {
       isObjectBackground: false,
       objectBackgroundUrl: null,
       isAnnotationsDisplayed: true,
-      isEnvironmentSkybox: true,
+      isEnvironmentSkybox: false,
       isCommentsHidden: true,
       isComparing: false,
       isDrawing: false,
@@ -605,6 +615,7 @@ export default {
       isOrdering: false,
       isRepeating: false,
       isTyping: false,
+      isWireframe: false,
       maxDuration: '00:00.000',
       movieDimensions: {
         width: 1920,
@@ -1327,6 +1338,7 @@ export default {
       const blobURL = URL.createObjectURL(file)
       this.objectBackgroundUrl = `${blobURL}#.hdr`
       this.isObjectBackground = true
+      this.isEnvironmentSkybox = true
     },
 
     // Annotations

diff --git a/src/components/previews/PreviewViewer.vue b/src/components/previews/PreviewViewer.vue
@@ -69,6 +69,7 @@
       :empty="!is3DModel"
       :full-screen="isFullScreen"
       :is-environment-skybox="isEnvironmentSkybox"
+      :is-wireframe="isWireframe"
       :light="isLight"
       :preview-url="originalPath"
       v-if="is3DModel"
@@ -194,6 +195,10 @@ export default {
     isEnvironmentSkybox: {
       type: Boolean,
       default: false
+    },
+    isWireframe: {
+      type: Boolean,
+      default: false
     }
   },
 

diff --git a/src/components/widgets/ButtonSimple.vue b/src/components/widgets/ButtonSimple.vue
@@ -8,6 +8,7 @@
       'is-loading': isLoading,
       'is-primary': isPrimary
     }"
+    :disabled="disabled"
     :title="title"
     @click="$emit('click')"
   >
@@ -53,6 +54,7 @@
     <key-icon :class="iconClass" v-if="icon == 'key'" />
     <zoom-in-icon :class="iconClass" v-if="icon == 'loupe'" />
     <globe-icon :class="iconClass" v-if="icon == 'globe'" />
+    <codepen-icon :class="iconClass" v-if="icon == 'codepen'" />
     <span :class="iconClass" v-if="icon === 'laser'"> ⦿ </span>
     <span
       :class="{
@@ -71,6 +73,7 @@ import {
   ChevronDownIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
+  CodepenIcon,
   CornerLeftDownIcon,
   CornerRightDownIcon,
   CopyIcon,
@@ -118,6 +121,7 @@ export default {
     ChevronDownIcon,
     ChevronLeftIcon,
     ChevronRightIcon,
+    CodepenIcon,
     CornerLeftDownIcon,
     CornerRightDownIcon,
     CopyIcon,
@@ -164,6 +168,10 @@ export default {
       default: false,
       type: Boolean
     },
+    disabled: {
+      default: false,
+      type: Boolean
+    },
     icon: {
       default: '',
       type: String

diff --git a/src/locales/en.js b/src/locales/en.js
@@ -760,7 +760,8 @@ export default {
       toggle_object_background: 'Enable/Disable environment map',
       toggle_environment_skybox: 'Show/Hide skybox background',
       toggle_playing_annotations: 'Show/Hide annotations while playing movies',
-      toggle_waveform: 'Show/Hide movie waveform'
+      toggle_waveform: 'Show/Hide movie waveform',
+      toggle_wireframe: 'Enable/Disable wireframe rendering',
     }
   },