Merge pull request Hubs-Foundation#6375 from mozilla/bitecs-fix-menu-…

…transparency

Fix object-menu rendering transparency issues

src/inflators/image.ts

@@ -13,14 +13,16 @@ export interface ImageParams {
   ratio: number;
   projection: ProjectionMode;
   alphaMode: AlphaMode;
-  alphaCutoff: number;
+  alphaCutoff?: number;
+  renderOrder?: number;
 }
 
 const DEFAULTS: Partial<ImageParams> = {
   projection: ProjectionMode.FLAT,
   alphaMode: AlphaMode.OPAQUE,
   alphaCutoff: 0.5,
-  ratio: 1
+  ratio: 1,
+  renderOrder: 0
 };
 
 export function inflateImage(world: HubsWorld, eid: EntityID, params: ImageParams) {
@@ -38,5 +40,7 @@ export function inflateImage(world: HubsWorld, eid: EntityID, params: ImageParam
   MediaImage.alphaCutoff[eid] = requiredParams.alphaCutoff;
   MediaImage.cacheKey[eid] = APP.getSid(cacheKey);
 
+  mesh.renderOrder = requiredParams.renderOrder;
+
   return eid;
 }

src/inflators/plane.ts

@@ -1,37 +1,42 @@
 import { addObject3DComponent } from "../utils/jsx-entity";
 import { HubsWorld } from "../app";
 import { EntityID } from "../utils/networking-types";
-import { Mesh, MeshBasicMaterial, PlaneGeometry } from "three";
+import { FrontSide, Mesh, MeshBasicMaterial, PlaneGeometry, Side } from "three";
 
 const MATERIAL_DEFAULTS = {
   color: "#000000",
   opacity: 1,
-  transparent: false
+  transparent: false,
+  side: FrontSide
 };
 
 const PLANE_DEFAULTS = {
   width: 1,
   height: 1,
-  material: MATERIAL_DEFAULTS
+  material: MATERIAL_DEFAULTS,
+  renderOrder: 0
 };
 
 export interface MeshBasicMaterialParams {
   color?: string;
   opacity?: number;
   transparent?: boolean;
+  side?: Side;
 }
 
 export interface PlaneParams {
   width?: number;
   height?: number;
   material?: MeshBasicMaterialParams;
+  renderOrder?: number;
 }
 
 export function inflatePlane(world: HubsWorld, eid: EntityID, params: PlaneParams) {
-  params = Object.assign({}, PLANE_DEFAULTS, params);
+  const planeParams = Object.assign({}, PLANE_DEFAULTS, params);
   params.material = Object.assign({}, MATERIAL_DEFAULTS, params.material);
-  const geometry = new PlaneGeometry(params.width, params.height);
+  const geometry = new PlaneGeometry(planeParams.width, planeParams.height);
   const material = new MeshBasicMaterial({ ...params.material });
   const obj = new Mesh(geometry, material);
+  obj.renderOrder = planeParams.renderOrder;
   addObject3DComponent(world, eid, obj);
 }

src/inflators/slice9.js

@@ -3,9 +3,20 @@ import { addObject3DComponent } from "../utils/jsx-entity";
 import { Slice9 } from "../bit-components";
 import { updateSlice9Geometry } from "../update-slice9-geometry";
 
-export function inflateSlice9(world, eid, { size, insets, texture }) {
+const DEFAULTS = {
+  size: [1, 1],
+  insets: [0, 0, 0, 0],
+  texture: null,
+  toneMapped: false,
+  transparent: true,
+  alphaTest: 0.0
+};
+
+export function inflateSlice9(world, eid, params) {
+  params = Object.assign(DEFAULTS, params);
+  const { size, insets, texture, transparent, alphaTest, toneMapped } = params;
   const geometry = new THREE.PlaneBufferGeometry(1, 1, 3, 3);
-  const material = new THREE.MeshBasicMaterial({ map: texture, transparent: true, toneMapped: false });
+  const material = new THREE.MeshBasicMaterial({ map: texture, transparent, toneMapped, alphaTest });
   const obj = new THREE.Mesh(geometry, material);
   addObject3DComponent(world, eid, obj);
 

src/prefabs/button3D.tsx

@@ -53,7 +53,8 @@ export function Button3D({
       ratio: 1,
       projection: ProjectionMode.FLAT,
       alphaMode: AlphaMode.BLEND,
-      cacheKey: icon.cacheKey
+      cacheKey: icon.cacheKey,
+      renderOrder: APP.RENDER_ORDER.HUD_ICONS
     };
     iconOrText.scale = icon.scale;
   } else {
@@ -69,7 +70,7 @@ export function Button3D({
   return (
     <entity
       name={name}
-      slice9={{ size: [width, height], insets: [64, 66, 64, 66], texture }}
+      slice9={{ size: [width, height], insets: [64, 66, 64, 66], texture, transparent: false, alphaTest: 0.1 }}
       cursorRaycastable
       remoteHoverTarget
       hoverButton={{ type }}

src/prefabs/object-menu.tsx

@@ -6,6 +6,8 @@ import rotateIconSrc from "../assets/rotate-action.png";
 import scaleIconSrc from "../assets/scale-action.png";
 import removeIconSrc from "../assets/remove-action.png";
 import { Plane } from "./plane";
+import { FrontSide } from "three";
+import { Layers } from "../camera-layers";
 
 export async function loadObjectMenuButtonIcons() {
   return Promise.all([
@@ -286,7 +288,9 @@ export function ObjectMenuPrefab() {
         position={position.background}
         width={0.8}
         height={0.8}
-        material={{ transparent: true, opacity: 0 }}
+        material={{ transparent: true, opacity: 0, side: FrontSide }}
+        renderOrder={APP.RENDER_ORDER.HUD_BACKGROUND}
+        layers={1 << Layers.CAMERA_LAYER_UI}
       />
       <PinButton ref={refs.pin} position={position.pin} />
       <UnpinButton ref={refs.unpin} position={position.unpin} />

src/prefabs/plane.tsx

@@ -1,19 +1,22 @@
 /** @jsx createElementEntity */
+import { Side } from "three";
 import { Attrs, createElementEntity } from "../utils/jsx-entity";
 
 export interface PlaneParams extends Attrs {
   width?: number;
   height?: number;
   material?: MeshBasicMaterialParams;
+  renderOrder?: number;
 }
 
 export interface MeshBasicMaterialParams extends Attrs {
   color?: string;
   opacity?: number;
   transparent?: boolean;
+  side?: Side;
   // TODO Add the rest of the material properties
 }
 
-export function Plane({ width, height, material, name = "Plane", ...props }: PlaneParams) {
-  return <entity name={name} cursorRaycastable plane={{ width, height, material }} {...props} />;
+export function Plane({ width, height, material, name = "Plane", renderOrder, ...props }: PlaneParams) {
+  return <entity name={name} cursorRaycastable plane={{ width, height, material, renderOrder }} {...props} />;
 }

src/utils/jsx-entity.ts

@@ -44,7 +44,7 @@ import {
 import { inflateMediaLoader } from "../inflators/media-loader";
 import { inflateMediaFrame } from "../inflators/media-frame";
 import { GrabbableParams, inflateGrabbable } from "../inflators/grabbable";
-import { inflateImage } from "../inflators/image";
+import { ImageParams, inflateImage } from "../inflators/image";
 import { inflateVideo, VideoParams } from "../inflators/video";
 import { inflateModel, ModelParams } from "../inflators/model";
 import { inflatePDFLoader, PDFLoaderParams } from "../inflators/pdf-loader";
@@ -271,14 +271,11 @@ export interface JSXComponentData extends ComponentData {
     size: [width: number, height: number];
     insets: [top: number, bottom: number, left: number, right: number];
     texture: Texture;
+    toneMapped?: boolean;
+    transparent?: boolean;
+    alphaTest?: number;
   };
-  image?: {
-    texture: Texture;
-    ratio: number;
-    projection: ProjectionMode;
-    alphaMode: AlphaMode;
-    cacheKey: string;
-  };
+  image?: ImageParams;
   video?: VideoParams;
   link?: LinkParams;
   networkedVideo?: true;