Skip to content

Commit 01c36c8

Browse files
alvarosabualvarosabu
authored
chore: cientos playground structure alike (#76)
* chore: new playground structure * chore: tres leches GUI on glitch demo * chore: bloom and glitch demos leches
1 parent cdb9497 commit 01c36c8

File tree

11 files changed

+394
-170
lines changed

11 files changed

+394
-170
lines changed

‎playground/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8" />
5-
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
5+
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
66
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
77
<title>Vite + Vue + TS</title>
88
</head>

‎playground/public/favicon.svg‎

Lines changed: 3 additions & 0 deletions
Loading

‎playground/public/logo.svg‎

Lines changed: 6 additions & 0 deletions
Loading

‎playground/public/nuxt-stones/package.json‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
{
2+
"name": "docs",
3+
"private": true,
4+
"version": "0.0.0",
5+
"type": "module",
6+
"scripts": {
7+
"dev": "vitepress dev",
8+
"build": "vitepress build",
9+
"preview": "vitepress preview"
10+
},
11+
"dependencies": {
12+
"@tresjs/cientos": "^3.0.1",
13+
"@tresjs/core": "^3.2.2",
14+
"@tresjs/post-processing": "workspace:^",
15+
"gsap": "^3.11.5"
16+
},
17+
"devDependencies": {
18+
"unocss": "^0.52.3",
19+
"unplugin-vue-components": "^0.24.1",
20+
"vite-svg-loader": "^4.0.0",
21+
"vitepress": "1.0.0-beta.1"
22+
}
23+
}

‎playground/src/App.vue‎

Lines changed: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,17 @@
1-
<script setup lang="ts"></script>
1+
<script setup lang="ts">
2+
import { watch } from 'vue'
3+
import { useRoute } from 'vue-router'
4+
5+
const route = useRoute()
6+
function setBodyClass(routeName: string) {
7+
document.title = `Post-processing Playground - ${routeName}`
8+
document.body.className = routeName
9+
}
10+
watch([route], () => setBodyClass(route.name?.toString() ?? ''))
11+
</script>
212

313
<template>
4-
<router-view />
14+
<Suspense>
15+
<router-view />
16+
</Suspense>
517
</template>

‎playground/src/components/GlitchDemo.vue‎

Lines changed: 0 additions & 71 deletions
This file was deleted.

‎playground/src/components/UnrealBloom.vue‎

Lines changed: 0 additions & 85 deletions
This file was deleted.

‎playground/src/pages/bloom.vue‎

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
<script setup lang="ts">
2+
import { Color, BasicShadowMap, NoToneMapping } from 'three'
3+
import { TresCanvas } from '@tresjs/core'
4+
import { OrbitControls, useTweakPane } from '@tresjs/cientos'
5+
import { BlendFunction, KernelSize } from 'postprocessing'
6+
import { EffectComposer, Bloom } from '@tresjs/post-processing'
7+
import { onMounted, reactive, ref, watch } from 'vue'
8+
import { TresLeches, useControls } from '@tresjs/leches'
9+
import '@tresjs/leches/styles'
10+
11+
const gl = {
12+
clearColor: '#121212',
13+
shadows: true,
14+
alpha: false,
15+
shadowMapType: BasicShadowMap,
16+
toneMapping: NoToneMapping,
17+
}
18+
19+
useControls('fpsgraph')
20+
21+
const materialRef = ref()
22+
const {
23+
intensity,
24+
blendFunction,
25+
resolution,
26+
kernelSize,
27+
mipmapBlur,
28+
} = useControls({
29+
intensity: {
30+
value: 4.0,
31+
min: 0,
32+
max: 10,
33+
step: 0.1,
34+
},
35+
blendFunction: {
36+
options: Object.keys(BlendFunction).map(key => ({
37+
text: key,
38+
value: BlendFunction[key],
39+
})),
40+
value: BlendFunction.ADD,
41+
},
42+
resolution: {
43+
value: 256,
44+
min: 64,
45+
max: 512,
46+
step: 64,
47+
},
48+
kernelSize: {
49+
options: Object.keys(KernelSize).map(key => ({
50+
text: key,
51+
value: KernelSize[key],
52+
})),
53+
value: KernelSize.VERY_SMALL,
54+
},
55+
mipmapBlur: true,
56+
})
57+
58+
const { threshold, smoothing } = useControls('luminance', {
59+
threshold: {
60+
value: 0.2,
61+
min: 0,
62+
max: 1,
63+
step: 0.01,
64+
},
65+
smoothing: {
66+
value: 0.3,
67+
min: 0,
68+
max: 1,
69+
step: 0.01,
70+
},
71+
})
72+
73+
onMounted(() => {
74+
if (materialRef.value) {
75+
const { value: emissiveIntensity } = useControls({
76+
emissiveIntensity: {
77+
value: 1,
78+
min: 0,
79+
max: 10,
80+
step: 0.1,
81+
},
82+
})
83+
84+
watch(emissiveIntensity, (newValue) => {
85+
materialRef.value.emissiveIntensity = newValue
86+
})
87+
}
88+
})
89+
</script>
90+
91+
<template>
92+
<TresLeches />
93+
<TresCanvas
94+
v-bind="gl"
95+
:disable-render="true"
96+
>
97+
<TresPerspectiveCamera
98+
:position="[5, 5, 5]"
99+
:look-at="[0, 0, 0]"
100+
/>
101+
<OrbitControls />
102+
<TresMesh>
103+
<TresSphereGeometry :args="[2, 32, 32]" />
104+
<TresMeshStandardMaterial
105+
color="hotpink"
106+
:emissive="new Color('hotpink')"
107+
:emissive-intensity="9"
108+
/>
109+
</TresMesh>
110+
<TresMesh :position="[2, 2, -2]">
111+
<TresSphereGeometry :args="[2, 32, 32]" />
112+
<TresMeshStandardMaterial color="hotpink" />
113+
</TresMesh>
114+
<TresMesh>
115+
<TresSphereGeometry :args="[2, 32, 32]" />
116+
<TresMeshStandardMaterial
117+
ref="materialRef"
118+
color="hotpink"
119+
:emissive="new Color('hotpink')"
120+
:emissive-intensity="1"
121+
/>
122+
</TresMesh>
123+
<TresGridHelper />
124+
<TresAmbientLight :intensity="0.5" />
125+
<TresDirectionalLight
126+
:position="[3, 3, 3]"
127+
:intensity="2"
128+
/>
129+
<Suspense>
130+
<EffectComposer :depth-buffer="true">
131+
<Bloom
132+
:luminance-threshold="threshold.value"
133+
:luminance-smoothing="smoothing.value"
134+
:intensity="intensity.value"
135+
:blend-function="blendFunction.value"
136+
:kernel-size="kernelSize.value"
137+
:resolution="resolution.value"
138+
:mipmap-blur="mipmapBlur.value"
139+
/>
140+
</EffectComposer>
141+
</Suspense>
142+
</TresCanvas>
143+
</template>

0 commit comments

Comments
 (0)