Merge pull request #113 from Tresjs/feature/109-renderer-presets

Feature/109 renderer presets

docs/api/renderer.md

@@ -13,6 +13,34 @@ The `Renderer` component is the main component of Tres. It's the one that create
 </template>
 ```
 
+## Presets <Badge warning text="v1.7.0+" />
+
+Tres comes with a few presets for the `Renderer` component. You can use them by setting the `preset` prop.
+
+### Realistic
+
+The `realistic` preset makes easy to setup the renderer for more realistic 3D scenes.
+
+```vue
+<template>
+  <TresCanvas preset="realistic">
+    <!-- Your scene goes here -->
+  </TresCanvas>
+</template>
+```
+
+It's equivalent to:
+
+```ts
+renderer.shadows: true,
+renderer.physicallyCorrectLights: true,
+renderer.outputEncoding: sRGBEncoding,
+renderer.toneMapping: ACESFilmicToneMapping,
+renderer.toneMappingExposure: 3,
+renderer.shadowMap.enabled: true,
+renderer.shadowMap.type: PCFSoftShadowMap
+```
+
 ## Props
 
 | Prop                        | Description                                                                                                                                                     | Default            |

packages/tres/src/components/TheEnvironment.vue

@@ -1,36 +1,11 @@
 <script setup lang="ts">
-import {
-  sRGBEncoding,
-  LinearEncoding,
-  BasicShadowMap,
-  PCFShadowMap,
-  PCFSoftShadowMap,
-  VSMShadowMap,
-  NoToneMapping,
-  LinearToneMapping,
-  ReinhardToneMapping,
-  CineonToneMapping,
-  ACESFilmicToneMapping,
-  CustomToneMapping,
-} from 'three'
-import { reactive, ref, shallowRef, watch } from 'vue'
-import { OrbitControls, useTweakPane, Environment } from '../../../cientos/src'
+import { ref, shallowRef, watch } from 'vue'
+import { OrbitControls, Environment, Box } from '../../../cientos/src'
 import { TresCanvas } from '../core/useRenderer/component'
 /* import { OrbitControls, GLTFModel } from '@tresjs/cientos' */
 
-const state = reactive({
-  shadows: true,
-  alpha: true,
-  physicallyCorrectLights: true,
-  shadowMapType: BasicShadowMap,
-  outputEncoding: sRGBEncoding,
-  toneMapping: NoToneMapping,
-})
-
 const sphereRef = ref()
 
-const { pane } = useTweakPane()
-
 /* const environmentFiles = [
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/px.jpg',
   'https://raw.githubusercontent.com/Tresjs/assets/main/textures/environmentMap/nx.jpg',
@@ -49,65 +24,10 @@ const environmentTexture = shallowRef()
 watch(environmentTexture, ({ getTexture }) => {
   envMap = getTexture()
 })
-
-pane.addInput(state, 'shadows', {
-  label: 'Shadows',
-})
-pane.addInput(state, 'physicallyCorrectLights', {
-  label: 'physicallyCorrectLights',
-})
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'outputEncoding',
-    options: [
-      { text: 'sRGBEncoding', value: sRGBEncoding },
-      { text: 'LinearEncoding', value: LinearEncoding },
-    ],
-    value: sRGBEncoding,
-  })
-  .on('change', ev => {
-    state.outputEncoding = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'ShadowMap Type',
-    options: [
-      { text: 'BasicShadowMap', value: BasicShadowMap },
-      { text: 'PCFShadowMap', value: PCFShadowMap },
-      { text: 'PCFSoftShadowMap', value: PCFSoftShadowMap },
-      { text: 'VSMShadowMap', value: VSMShadowMap },
-    ],
-    value: BasicShadowMap,
-  })
-  .on('change', ev => {
-    state.shadowMapType = ev.value
-  })
-
-pane
-  .addBlade({
-    view: 'list',
-    label: 'toneMapping',
-    options: [
-      { text: 'NoToneMapping', value: NoToneMapping },
-      { text: 'LinearToneMapping', value: LinearToneMapping },
-      { text: 'ReinhardToneMapping', value: ReinhardToneMapping },
-      { text: 'CineonToneMapping', value: CineonToneMapping },
-      { text: 'ACESFilmicToneMapping', value: ACESFilmicToneMapping },
-      { text: 'CustomToneMapping', value: CustomToneMapping },
-    ],
-    value: NoToneMapping,
-  })
-  .on('change', ev => {
-    console.log(ev.value)
-    state.toneMapping = ev.value
-  })
 </script>
 <template>
-  <TresCanvas v-bind="state">
+  <!--   <TresCanvas v-bind="state"> -->
+  <TresCanvas preset="realistic">
     <TresPerspectiveCamera :position="[8, 8, 8]" :fov="45" :near="0.1" :far="1000" :look-at="[-8, 3, -3]" />
     <OrbitControls make-default />
     <TresScene>
@@ -124,9 +44,12 @@ pane
         <TresSphereGeometry />
         <TresMeshStandardMaterial color="#FBB03B" :map="envMap" :metalness="1" :roughness="0" />
       </TresMesh>
+      <Box :position="[2, 6, 0]" cast-shadow>
+        <TresMeshStandardMaterial color="#008080" :map="envMap" :metalness="1" :roughness="0" />
+      </Box>
       <TresDirectionalLight :position="[0, 8, 4]" :intensity="0.7" cast-shadow />
       <TresMesh :rotation="[-Math.PI / 2, 0, 0]" receive-shadow>
-        <TresPlaneGeometry :args="[10, 10, 10, 10]" />
+        <TresPlaneGeometry :args="[20, 20, 20, 10]" />
         <TresMeshToonMaterial />
       </TresMesh>
       <TresDirectionalLight :position="[0, 2, 4]" :intensity="1" cast-shadow />

packages/tres/src/core/useRenderer/component.ts

@@ -1,5 +1,6 @@
+import { RendererPresetsType } from './const'
 import { ShadowMapType, TextureEncoding, ToneMapping } from 'three'
-import { h, defineComponent, ref, provide, onBeforeUnmount, shallowRef, PropType } from 'vue'
+import { h, defineComponent, ref, provide, onBeforeUnmount, PropType } from 'vue'
 import { useRenderer } from '.'
 import { useLogger } from '/@/composables'
 import { TresVNodeType } from '/@/types'
@@ -12,16 +13,17 @@ export const TresCanvas = defineComponent({
   name: 'TresCanvas',
   props: {
     shadows: Boolean,
-    shadowMapType: Object as PropType<ShadowMapType>,
+    shadowMapType: Number as PropType<ShadowMapType>,
     physicallyCorrectLights: Boolean,
-    outputEncoding: Object as PropType<TextureEncoding>,
-    toneMapping: Object as PropType<ToneMapping>,
+    outputEncoding: Number as PropType<TextureEncoding>,
+    toneMapping: Number as PropType<ToneMapping>,
     toneMappingExposure: Number,
     context: Object as PropType<WebGLRenderingContext>,
-    powerPreference: Object as PropType<'high-performance' | 'low-power' | 'default'>,
+    powerPreference: String as PropType<'high-performance' | 'low-power' | 'default'>,
     preserveDrawingBuffer: Boolean,
     clearColor: String,
     windowSize: { type: Boolean, default: false },
+    preset: String as PropType<RendererPresetsType>,
   },
   setup(props, { slots, attrs }) {
     const { logError } = useLogger()

packages/tres/src/core/useRenderer/const.ts

@@ -0,0 +1,16 @@
+import { ACESFilmicToneMapping, PCFSoftShadowMap, sRGBEncoding } from 'three'
+
+export const rendererPresets = {
+  realistic: {
+    physicallyCorrectLights: true,
+    outputEncoding: sRGBEncoding,
+    toneMapping: ACESFilmicToneMapping,
+    toneMappingExposure: 3,
+    shadowMap: {
+      enabled: true,
+      type: PCFSoftShadowMap,
+    },
+  },
+}
+
+export type RendererPresetsType = keyof typeof rendererPresets

packages/tres/src/core/useRenderer/index.ts

@@ -22,6 +22,9 @@ import type { TextureEncoding, ToneMapping } from 'three'
 import { useRenderLoop, useTres } from '/@/core/'
 import { normalizeColor } from '/@/utils/normalize'
 import { TresColor } from '/@/types'
+import { rendererPresets, RendererPresetsType } from './const'
+import { merge } from '/@/utils'
+import { useLogger } from '/@/composables'
 
 export interface UseRendererOptions extends WebGLRendererParameters {
   /**
@@ -100,6 +103,7 @@ export interface UseRendererOptions extends WebGLRendererParameters {
    */
   clearColor?: MaybeComputedRef<TresColor>
   windowSize?: MaybeComputedRef<boolean>
+  preset?: RendererPresetsType
 }
 
 const renderer = shallowRef<WebGLRenderer>()
@@ -133,10 +137,11 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
     preserveDrawingBuffer = false,
     clearColor,
     windowSize = false,
+    preset = undefined,
   } = toRefs(options)
 
   const { width, height } = resolveUnref(windowSize) ? useWindowSize() : useElementSize(container)
-
+  const { logError } = useLogger()
   const { pixelRatio } = useDevicePixelRatio()
   const { pause, resume } = useRenderLoop()
   const aspectRatio = computed(() => width.value / height.value)
@@ -155,6 +160,16 @@ export function useRenderer(canvas: MaybeElementRef, container: MaybeElementRef,
       return
     }
 
+    const rendererPreset = resolveUnref(preset)
+
+    if (rendererPreset) {
+      if (!(rendererPreset in rendererPresets))
+        logError('Renderer Preset must be one of these: ' + Object.keys(rendererPresets).join(', '))
+      merge(renderer.value, rendererPresets[rendererPreset])
+
+      return
+    }
+
     renderer.value.shadowMap.enabled = resolveUnref(shadows) as boolean
     renderer.value.shadowMap.type = resolveUnref(shadowMapType) as ShadowMapType
     renderer.value.toneMapping = (resolveUnref(toneMapping) as ToneMapping) || NoToneMapping

packages/tres/src/utils/index.ts

@@ -1,3 +1,14 @@
 export function toSetMethodName(key: string) {
   return 'set' + key[0].toUpperCase() + key.slice(1)
 }
+
+export const merge = (target: any, source: any) => {
+  // Iterate through `source` properties and if an `Object` set property to merge of `target` and `source` properties
+  for (const key of Object.keys(source)) {
+    if (source[key] instanceof Object) Object.assign(source[key], merge(target[key], source[key]))
+  }
+
+  // Join `target` and modified `source`
+  Object.assign(target || {}, source)
+  return target
+}