Show 3D components in different view modes (wireframe, solid, material preview)

[itsdouges]

This issue will implement forced render modes to render the scene in different materials.

• Modes should be added to the settings array here: https://github.com/trytriplex/triplex/blob/main/packages/renderer/src/features/scene-controls/controls-three-fiber.ts#L10
• Group name should be "Viewport Shading"
• A component called ViewportShading should be created in a sibling file called viewport-shading.tsx to https://github.com/trytriplex/triplex/blob/main/packages/renderer/src/features/canvas/canvas.tsx and then rendered in the Canvas component. This component will listen for events and then apply the material overrides.
• An example of applying a material override is: scene.overrideMaterial, use the useThree(store => store.scene) hook to get ahold of the scene.
• There should be three modes: Wireframe, Solid, Material Preview.
• Wireframe should set the overrideMaterial to a wireframe material, solid to one that hard hard edges, and material preview just sets the material override to undefined
• Handle edge cases e.g. if userland sets their own material override should be used instead of undefined
• Listening for events looks like this, where id is the id set in the controls-three-fiber.tsx file, and scope is "scene".

  import { on } from "@triplex/bridge/client";
  on("extension-point-triggered", ({ id, scope }) => {});
  

This should be enough to get you started.

[itsdouges]

Having this work well in the current WebGL renderer is tricky as the overrideMaterial property isn't fit for purpose. Overriding materials in an effect is dangerous because components can re-render and then unset it. As well as Triplex now needing to track the original material. Overriding it in the frame loop has similar problems and is also not performant.

Perhaps we only implement this for WebGPU? See: https://github.com/mrdoob/three.js/issues/26732