Skip to content

Commit abc8fdc

Browse files
raytranukraytranuk
committed
initial
1 parent 9f2558e commit abc8fdc

File tree

1 file changed

+203
-0
lines changed

1 file changed

+203
-0
lines changed

‎examples/graphics/post-effects-mat-ed.html

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>PlayCanvas Post Effects</title>
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
7+
<link rel="icon" type="image/png" href="../playcanvas-favicon.png" />
8+
<script src="../../build/playcanvas.js"></script>
9+
<script src="../../build/playcanvas-extras.js"></script>
10+
<style>
11+
body {
12+
margin: 0;
13+
overflow-y: hidden;
14+
}
15+
</style>
16+
</head>
17+
18+
<body>
19+
<!-- The canvas element -->
20+
<canvas id="application-canvas"></canvas>
21+
22+
<script>
23+
function createMaterial(colors) {
24+
var material = new pc.StandardMaterial();
25+
for (var param in colors) {
26+
material[param] = colors[param];
27+
}
28+
material.update();
29+
return material;
30+
}
31+
32+
// create the application
33+
var canvas = document.getElementById("application-canvas");
34+
var app = new pc.Application(canvas);
35+
</script>
36+
37+
<!-- Include some post effects -->
38+
<script src="../assets/scripts/posteffects/posteffect-bloom.js"></script>
39+
<script src="../assets/scripts/posteffects/posteffect-sepia.js"></script>
40+
<script src="../assets/scripts/posteffects/posteffect-vignette.js"></script>
41+
<script src="../assets/scripts/posteffects/posteffect-bokeh.js"></script>
42+
<!-- The script -->
43+
<script>
44+
// Start the update loop
45+
app.start();
46+
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
47+
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
48+
app.setCanvasResolution(pc.RESOLUTION_AUTO);
49+
50+
window.addEventListener("resize", function () {
51+
app.resizeCanvas(canvas.width, canvas.height);
52+
});
53+
54+
var miniStats = new pcx.MiniStats(app);
55+
56+
app.scene.ambientLight = new pc.Color(0.4, 0.4, 0.4);
57+
58+
// Generate some materials to assigm to scene objects
59+
var gray = createMaterial({
60+
ambient: new pc.Color(0.1, 0.1, 0.1),
61+
diffuse: new pc.Color(0.5, 0.5, 0.5)
62+
});
63+
var white = createMaterial({
64+
emissive: new pc.Color(1, 1, 1)
65+
});
66+
var blue = createMaterial({
67+
diffuse: new pc.Color(0, 0, 0),
68+
emissive: new pc.Color(0, 0, 1)
69+
});
70+
71+
var entity, light, camera;
72+
73+
// Load a model file and create a Entity with a model component
74+
var url = "../assets/models/statue.glb";
75+
app.assets.loadFromUrl(url, "container", function (err, asset) {
76+
entity = new pc.Entity();
77+
entity.addComponent("model", {
78+
type: "asset",
79+
asset: asset.resource.model,
80+
castShadows: true
81+
});
82+
app.root.addChild(entity);
83+
});
84+
85+
// Create an Entity with a camera component
86+
var camera = new pc.Entity();
87+
camera.addComponent("camera", {
88+
clearColor: new pc.Color(0.4, 0.45, 0.5)
89+
});
90+
camera.translate(0, 7, 24);
91+
camera.rotate(0, 0, 0);
92+
93+
// Create an Entity for the ground
94+
var ground = new pc.Entity();
95+
ground.addComponent("model", {
96+
type: "box"
97+
});
98+
ground.setLocalScale(50, 1, 50);
99+
ground.setLocalPosition(0, -0.5, 0);
100+
ground.model.material = gray;
101+
102+
// Create an spot light
103+
var light = new pc.Entity();
104+
light.addComponent("light", {
105+
type: "spot",
106+
color: new pc.Color(1, 1, 1),
107+
outerConeAngle: 60,
108+
innerConeAngle: 40,
109+
range: 100,
110+
intensity: 1,
111+
castShadows: true,
112+
shadowBias: 0.005,
113+
normalOffsetBias: 0.01,
114+
shadowResolution: 2048
115+
});
116+
117+
var cone = new pc.Entity();
118+
cone.addComponent("model", {
119+
type: "cone"
120+
});
121+
cone.model.material = white;
122+
light.addChild(cone);
123+
124+
// Create a point light
125+
var pointlight = new pc.Entity();
126+
pointlight.addComponent("light", {
127+
type: "point",
128+
color: new pc.Color(0, 0, 1),
129+
range: 100,
130+
intensity: 1
131+
});
132+
pointlight.addComponent("model", {
133+
type: "sphere"
134+
});
135+
pointlight.model.material = blue;
136+
137+
// create some post effects
138+
var bloom = new pc.BloomEffect(app.graphicsDevice);
139+
bloom.bloomThreshold = 0.1;
140+
camera.camera.postEffects.addEffect(bloom);
141+
142+
var sepia = new pc.SepiaEffect(app.graphicsDevice);
143+
sepia.amount = 0.7;
144+
camera.camera.postEffects.addEffect(sepia);
145+
146+
var vignette = new pc.VignetteEffect(app.graphicsDevice);
147+
vignette.darkness = 2;
148+
camera.camera.postEffects.addEffect(vignette);
149+
150+
var bokeh = new pc.BokehEffect(app.graphicsDevice);
151+
bokeh.focus = 0.4;
152+
camera.camera.postEffects.addEffect(bokeh);
153+
// Add Entities into the scene hierarchy
154+
app.root.addChild(camera);
155+
app.root.addChild(light);
156+
app.root.addChild(pointlight);
157+
app.root.addChild(ground);
158+
159+
// Simple update loop to rotate the light
160+
var radius = 20;
161+
var height = 5;
162+
var angle = 0;
163+
164+
var pointRadius = 5;
165+
var pointHeight = 10;
166+
167+
var hasEffects = true;
168+
var onKeyDown = function (e) {
169+
if (e.key === pc.KEY_SPACE) {
170+
if (hasEffects) {
171+
camera.camera.postEffects.removeEffect(bokeh);
172+
camera.camera.postEffects.removeEffect(sepia);
173+
camera.camera.postEffects.removeEffect(vignette);
174+
} else {
175+
camera.camera.postEffects.addEffect(sepia);
176+
camera.camera.postEffects.addEffect(vignette);
177+
camera.camera.postEffects.addEffect(bokeh);
178+
}
179+
hasEffects = !hasEffects;
180+
}
181+
e.event.preventDefault(); // Use original browser event to prevent browser action.
182+
};
183+
var keyboard = new pc.Keyboard(document.body);
184+
keyboard.on("keydown", onKeyDown, this);
185+
186+
app.on("update", function (dt) {
187+
angle += 20 * dt;
188+
if (angle > 360) {
189+
angle -= 360;
190+
}
191+
if (entity) {
192+
light.lookAt(entity.getPosition());
193+
light.rotateLocal(90, 0, 0);
194+
light.setLocalPosition(radius * Math.sin(angle * pc.math.DEG_TO_RAD), height, radius * Math.cos(angle * pc.math.DEG_TO_RAD));
195+
// light.enabled = false;
196+
197+
pointlight.setLocalPosition(pointRadius * Math.sin(-2 * angle * pc.math.DEG_TO_RAD), pointHeight, pointRadius * Math.cos(-2 * angle * pc.math.DEG_TO_RAD));
198+
}
199+
200+
});
201+
</script>
202+
</body>
203+
</html>

0 commit comments

Comments
 (0)