Skip to content

Commit d7f24db

Browse files
mvaligurskyMartin Valigursky
mvaligursky
and
Martin Valigursky
authored
Add volumetric fog rendering to CameraFrame (#9069)
* Add volumetric fog rendering to CameraFrame * updates --------- Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
1 parent ba79acf commit d7f24db

13 files changed

Lines changed: 1519 additions & 11 deletions

File tree

‎examples/src/examples/graphics/shadow-soft.example.mjs‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -224,9 +224,9 @@ app.on('update', (/** @type {number} */ dt) => {
224224

225225
// Move the clouds around
226226
clouds.forEach((cloud, index) => {
227-
const redialOffset = (index / clouds.length) * (6.24 / cloudSpeed);
228-
const radius = 9 + 4 * Math.sin(redialOffset);
229-
const cloudTime = time + redialOffset;
227+
const radialOffset = (index / clouds.length) * (6.24 / cloudSpeed);
228+
const radius = 9 + 4 * Math.sin(radialOffset);
229+
const cloudTime = time + radialOffset;
230230
cloud.setLocalPosition(
231231
2 + radius * Math.sin(cloudTime * cloudSpeed),
232232
4,

‎examples/src/examples/graphics/volumetric-fog.controls.jsx‎

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
import {
2+
BindingTwoWay,
3+
BooleanInput,
4+
ColorPicker,
5+
LabelGroup,
6+
Panel,
7+
SliderInput,
8+
VectorInput
9+
} from '@playcanvas/pcui/react';
10+
11+
/**
12+
* @import { Observer } from '@playcanvas/observer'
13+
* @import { ReactElement } from 'react'
14+
*/
15+
16+
/**
17+
* @param {{ observer: Observer }} props - The control panel props.
18+
* @returns {ReactElement} The control panel.
19+
*/
20+
export function Controls({ observer }) {
21+
return (
22+
<>
23+
<Panel headerText='Volumetric Fog'>
24+
<LabelGroup text='Enabled'>
25+
<BooleanInput
26+
type='toggle'
27+
binding={new BindingTwoWay()}
28+
link={{ observer, path: 'settings.fog.enabled' }}
29+
/>
30+
</LabelGroup>
31+
<LabelGroup text='Tint'>
32+
<ColorPicker
33+
binding={new BindingTwoWay()}
34+
link={{ observer, path: 'settings.fog.tint' }}
35+
/>
36+
</LabelGroup>
37+
<LabelGroup text='Density'>
38+
<SliderInput
39+
binding={new BindingTwoWay()}
40+
link={{ observer, path: 'settings.fog.density' }}
41+
min={0}
42+
max={0.02}
43+
precision={4}
44+
/>
45+
</LabelGroup>
46+
<LabelGroup text='Height Base'>
47+
<SliderInput
48+
binding={new BindingTwoWay()}
49+
link={{ observer, path: 'settings.fog.heightBase' }}
50+
min={-100}
51+
max={200}
52+
precision={0}
53+
/>
54+
</LabelGroup>
55+
<LabelGroup text='Height Falloff'>
56+
<SliderInput
57+
binding={new BindingTwoWay()}
58+
link={{ observer, path: 'settings.fog.heightFalloff' }}
59+
min={0}
60+
max={0.2}
61+
precision={3}
62+
/>
63+
</LabelGroup>
64+
<LabelGroup text='Anisotropy'>
65+
<SliderInput
66+
binding={new BindingTwoWay()}
67+
link={{ observer, path: 'settings.fog.anisotropy' }}
68+
min={0}
69+
max={0.95}
70+
precision={2}
71+
/>
72+
</LabelGroup>
73+
<LabelGroup text='Intensity'>
74+
<SliderInput
75+
binding={new BindingTwoWay()}
76+
link={{ observer, path: 'settings.fog.intensity' }}
77+
min={0}
78+
max={5}
79+
precision={2}
80+
/>
81+
</LabelGroup>
82+
<LabelGroup text='Ambient Color'>
83+
<ColorPicker
84+
binding={new BindingTwoWay()}
85+
link={{ observer, path: 'settings.fog.ambientColor' }}
86+
/>
87+
</LabelGroup>
88+
<LabelGroup text='Ambient'>
89+
<SliderInput
90+
binding={new BindingTwoWay()}
91+
link={{ observer, path: 'settings.fog.ambientIntensity' }}
92+
min={0}
93+
max={0.1}
94+
precision={3}
95+
/>
96+
</LabelGroup>
97+
<LabelGroup text='Max Distance'>
98+
<SliderInput
99+
binding={new BindingTwoWay()}
100+
link={{ observer, path: 'settings.fog.maxDistance' }}
101+
min={100}
102+
max={1000}
103+
precision={0}
104+
/>
105+
</LabelGroup>
106+
<LabelGroup text='Steps'>
107+
<SliderInput
108+
binding={new BindingTwoWay()}
109+
link={{ observer, path: 'settings.fog.steps' }}
110+
min={4}
111+
max={64}
112+
precision={0}
113+
/>
114+
</LabelGroup>
115+
<LabelGroup text='Resolution Scale'>
116+
<SliderInput
117+
binding={new BindingTwoWay()}
118+
link={{ observer, path: 'settings.fog.scale' }}
119+
min={0.25}
120+
max={1}
121+
precision={2}
122+
/>
123+
</LabelGroup>
124+
<LabelGroup text='TAA'>
125+
<BooleanInput
126+
type='toggle'
127+
binding={new BindingTwoWay()}
128+
link={{ observer, path: 'settings.fog.taa' }}
129+
/>
130+
</LabelGroup>
131+
<LabelGroup text='Soft Shadows'>
132+
<BooleanInput
133+
type='toggle'
134+
binding={new BindingTwoWay()}
135+
link={{ observer, path: 'settings.fog.softShadows' }}
136+
/>
137+
</LabelGroup>
138+
<LabelGroup text='Light Rotation'>
139+
<VectorInput
140+
dimensions={2}
141+
binding={new BindingTwoWay()}
142+
link={{ observer, path: 'settings.light.rotation' }}
143+
value={[78, 120]}
144+
precision={0}
145+
/>
146+
</LabelGroup>
147+
</Panel>
148+
</>
149+
);
150+
}

0 commit comments

Comments
 (0)