init

Author: damienmontastier

playground/src/pages/postprocessing/seurat.vue

@@ -0,0 +1,91 @@
+<script setup lang="ts">
+import { ContactShadows, Environment, OrbitControls } from '@tresjs/cientos'
+import { TresCanvas } from '@tresjs/core'
+import { TresLeches, useControls } from '@tresjs/leches'
+import { NoToneMapping } from 'three'
+import { BlendFunction } from 'postprocessing'
+import { EffectComposerPmndrs, SeuratPmndrs } from '@tresjs/post-processing'
+
+import '@tresjs/leches/styles'
+
+const gl = {
+  clearColor: '#ffffff',
+  toneMapping: NoToneMapping,
+  multisampling: 8,
+  envMapIntensity: 10,
+}
+
+const neonColors = [
+  '#FF00FF', // Magenta
+  '#00FFFF', // Cyan
+  '#00FF00', // Lime
+  '#FFFF00', // Yellow
+  '#FF0000', // Red
+  '#FF1493', // Deep Pink
+  '#7FFF00', // Chartreuse
+  '#FF4500', // Orange Red
+  '#8A2BE2', // Blue Violet
+  '#00FF7F', // Spring Green
+  '#FFD700', // Gold
+  '#FF69B4', // Hot Pink
+  '#ADFF2F', // Green Yellow
+  '#FF6347', // Tomato
+  '#40E0D0', // Turquoise
+  '#EE82EE', // Violet
+]
+
+const { blendFunction, amount, offsetX, offsetY } = useControls({
+  amount: { value: 0.2, step: 0.001, max: 1 },
+  offsetX: { value: 0.5, step: 0.01, min: 0, max: 1 },
+  offsetY: { value: 0.5, step: 0.01, min: 0, max: 1 },
+  blendFunction: {
+    options: Object.keys(BlendFunction).map(key => ({
+      text: key,
+      value: BlendFunction[key as keyof typeof BlendFunction],
+    })),
+    value: BlendFunction.OVERLAY,
+  },
+})
+</script>
+
+<template>
+  <TresLeches />
+
+  <TresCanvas
+    v-bind="gl"
+  >
+    <TresPerspectiveCamera
+      :position="[0, 6.5, 6.5]"
+      :look-at="[0, 0, 0]"
+    />
+    <OrbitControls auto-rotate />
+
+    <TresAmbientLight :intensity="1" />
+
+    <template v-for="(color, index) in neonColors" :key="index">
+      <TresMesh :position="[index % 4 * 2 - 3, 0, Math.floor(index / 4) * 2 - 3]">
+        <TresBoxGeometry :args="[2, 2, 2]" />
+        <TresMeshStandardMaterial :color="color" :roughness=".5" :metalness="1" />
+      </TresMesh>
+    </template>
+
+    <Suspense>
+      <Environment :blur=".25" preset="snow" />
+    </Suspense>
+
+    <TresDirectionalLight color="white" />
+
+    <ContactShadows
+      :opacity=".65"
+      :position-y="-1"
+      :scale="35"
+      :blur="1"
+    />
+
+    <Suspense>
+      <EffectComposerPmndrs>
+        <SeuratPmndrs :amount="amount" :offset="[offsetX, offsetY]" :blendFunction="Number(blendFunction)" />
+      </EffectComposerPmndrs>
+    </Suspense>
+  </TresCanvas>
+</template>

playground/src/router.ts

@@ -50,6 +50,7 @@ export const postProcessingRoutes = [
   makeRoute('Sepia', '🌅', false),
   makeRoute('Scanline', '📽️', false),
   makeRoute('Shock Wave', '🌊', false),
+  makeRoute('Seurat', '🎩', false),
   makeRoute('Vignette', '🕶️', false),
   makeRoute('Barrel blur', '🌀', false),
   makeRoute('On-demand', '🔄', false),

src/core/pmndrs/SeuratPmndrs.vue

@@ -0,0 +1,50 @@
+<script lang="ts" setup>
+import type { BlendFunction } from 'postprocessing'
+import { Vector2 } from 'three'
+import { SeuratEffect } from './custom/seurat/index'
+import { makePropWatchers } from '../../util/prop'
+import { useEffectPmndrs } from './composables/useEffectPmndrs'
+
+export interface SeuratPmndrsProps {
+  /**
+   * The blend function for the effect.
+   * Determines how this effect blends with other effects.
+   */
+  blendFunction?: BlendFunction
+
+  /**
+   * The intensity of the barrel distortion.
+   * A value between 0 (no distortion) and 1 (maximum distortion).
+   */
+  amount?: number
+
+  /**
+   * The offset of the barrel distortion center.
+   * A Vector2 value or an A value or an array of two numbers, with both values ranging from 0 to 1.
+   * This allows you to change the position of the distortion effect.
+   */
+  offset?: Vector2 | [number, number]
+}
+
+const props = defineProps<SeuratPmndrsProps>()
+
+const { pass, effect } = useEffectPmndrs(
+  () => new SeuratEffect({
+    ...props,
+    offset: Array.isArray(props.offset) ? new Vector2(...props.offset) : props.offset,
+  }),
+  props,
+)
+
+defineExpose({ pass, effect })
+
+makePropWatchers(
+  [
+    [() => props.blendFunction, 'blendMode.blendFunction'],
+    [() => props.amount, 'amount'],
+    [() => props.offset, 'offset'],
+  ],
+  effect,
+  () => new SeuratEffect(),
+)
+</script>

src/core/pmndrs/custom/seurat/index.ts

@@ -0,0 +1,71 @@
+import { Uniform, Vector2 } from 'three'
+import { BlendFunction, Effect } from 'postprocessing'
+
+/**
+ * SeuratEffect - A custom effect for applying a barrel distortion
+ * with chromatic aberration blur.
+ */
+
+export class SeuratEffect extends Effect {
+  /**
+   * Creates a new SeuratEffect instance.
+   *
+   * @param {object} [options] - Configuration options for the effect.
+   * @param {BlendFunction} [options.blendFunction] - Blend mode.
+   * @param {number} [options.amount] - Intensity of the barrel distortion (0 to 1).
+   * @param {Vector2} [options.offset] - Offset of the barrel distortion center (0 to 1 for both x and y). This allows you to change the position of the distortion effect.
+   *
+   */
+  constructor({ blendFunction = BlendFunction.NORMAL, amount = 0.15, offset = new Vector2(0.5, 0.5) } = {}) {
+    super('SeuratEffect', `
+    uniform float amount;
+    uniform vec2 offset;
+
+    #define NUM_ITER 16
+
+    void mainUv(inout vec2 uv) {
+        uv = uv;
+    }
+
+    void mainImage(const in vec4 inputColor, const in vec2 uv, out vec4 outputColor) {
+        vec3 color = inputColor.rgb;
+
+        outputColor = vec4(color, inputColor.a); // Preserves original alpha
+    }
+      `, {
+      blendFunction,
+      uniforms: new Map<string, Uniform<number | Vector2>>([
+        ['amount', new Uniform(amount)], // Uniform controlling the intensity of distortion
+        ['offset', new Uniform(offset)], // Uniform controlling the offset of distortion
+      ]),
+    })
+  }
+
+  /**
+   * The amount.
+   *
+   * @type {number}
+   */
+
+  get amount() {
+    return this.uniforms.get('amount')?.value
+  }
+
+  set amount(value) {
+    this.uniforms.get('amount')!.value = value
+  }
+
+  /**
+   * The offset.
+   *
+   * @type {Vector2}
+   */
+
+  get offset() {
+    return this.uniforms.get('offset')?.value
+  }
+
+  set offset(value) {
+    this.uniforms.get('offset')!.value = value
+  }
+}

src/core/pmndrs/index.ts

@@ -23,6 +23,7 @@ import DotScreenPmndrs, { type DotScreenPmndrsProps } from './DotScreenPmndrs.vu
 import SepiaPmndrs, { type SepiaPmndrsProps } from './SepiaPmndrs.vue'
 import LinocutPmndrs, { type LinocutPmndrsProps } from './LinocutPmndrs.vue'
 import DepthPickingPassPmndrs, { type DepthPickingPassPmndrsProps } from './DepthPickingPassPmndrs.vue'
+import SeuratPmndrs, { type SeuratPmndrsProps } from './SeuratPmndrs.vue'
 
 export {
   BloomPmndrs,
@@ -48,6 +49,7 @@ export {
   SepiaPmndrs,
   LinocutPmndrs,
   DepthPickingPassPmndrs,
+  SeuratPmndrs,
   BloomPmndrsProps,
   DepthOfFieldPmndrsProps,
   EffectComposerPmndrsProps,
@@ -70,4 +72,5 @@ export {
   SepiaPmndrsProps,
   LinocutPmndrsProps,
   DepthPickingPassPmndrsProps,
+  SeuratPmndrsProps,
 }