-
Notifications
You must be signed in to change notification settings - Fork 67
/
post-processing-test.html
136 lines (110 loc) · 3.47 KB
/
post-processing-test.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html>
<head>
<title>A-Frame Examples</title>
<link rel="icon" type="image/png" href="data:image/png;base64,iVBORw0KGgo=">
<script src="js/aframe-v1.3.0.js"></script>
<script src="js/aframe-environment-component.js"></script>
</head>
<body>
<script>
AFRAME.registerComponent("color-shift", {
init: function ()
{
let rtWidth = 1024;
let rtHeight = 1024;
// render the scene to this texture
this.renderTarget0 = new THREE.WebGLRenderTarget(rtWidth, rtHeight, {});
this.renderTarget0.texture.magFilter = THREE.NearestFilter;
this.renderTarget0.texture.minFilter = THREE.NearestFilter;
this.renderTarget0.texture.generateMipmaps = false;
let texture = this.renderTarget0.texture;
let postMaterial = new THREE.ShaderMaterial( {
uniforms: {
tex: {type: "t", value: texture},
},
vertexShader: `
varying vec2 vUv;
void main()
{
vUv = uv;
gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
}
`,
fragmentShader: `
varying vec2 vUv;
uniform sampler2D tex;
void main()
{
vec4 color = texture2D(tex, vUv);
gl_FragColor = vec4(color.g, color.b, color.r, 1);
}
`
});
// separate scene #1 for texture post processing
const quad = new THREE.Mesh(
new THREE.PlaneGeometry(2, 2), postMaterial );
this.rtScene = new THREE.Scene();
this.rtScene.add(quad);
this.rtCamera = new THREE.OrthographicCamera();
this.rtCamera.position.z = 0.5;
},
tick: function(t, dt)
{
// store XR settings
const renderer = this.el.sceneEl.renderer;
const currentRenderTarget = renderer.getRenderTarget();
const currentXrEnabled = renderer.xr.enabled;
const currentShadowAutoUpdate = renderer.shadowMap.autoUpdate;
// temporarily disable XR
renderer.xr.enabled = false;
renderer.shadowMap.autoUpdate = false;
// apply post-processing effects to previously rendered target texture,
// displayed on a quad, rendered to screen
renderer.setRenderTarget(null);
renderer.render(this.rtScene, this.rtCamera);
// re-enable XR
renderer.xr.enabled = currentXrEnabled;
renderer.shadowMap.autoUpdate = currentShadowAutoUpdate;
// render scene onto a texture
renderer.setRenderTarget(this.renderTarget0);
}
});
</script>
<a-scene environment="preset: default;" color-shift>
<a-torus-knot
p="2" q="3" radius="0.5" radius-tubular="0.1"
position = "-2.5 1.5 -4"
color="#CC3333">
</a-torus-knot>
<a-box
width = "2" height = "1" depth = "1"
position = "-1.1 0.5 -3"
rotation = "0 45 0"
color = "#FF8800">
</a-box>
<a-sphere
id="sphere"
radius = "1.25"
position = "0 1.25 -5"
color = "#DDBB00">
</a-sphere>
<a-cylinder
radius = "0.5" height = "1.5"
position = " 1 0.75 -3"
color = "#008800">
</a-cylinder>
<a-cone
radius-bottom = "1" radius-top = "0" height = "2"
position = "3 1 -4"
color = "#4444CC">
</a-cone>
<a-torus
radius="0.5" radius-tubular="0.1"
position = "2 3 -4"
rotation = "30 -20 0"
color="#8800FF">
</a-torus>
</a-scene>
</body>
</html>