Skip to content

Commit ae6a10d

Browse files
raytranukraytranuk
authored
Merge branch 'master' into thicker_text_outlines
2 parents 0ce546b + 87b5c8e commit ae6a10d

File tree

101 files changed

+4847
-2333
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

101 files changed

+4847
-2333
lines changed

‎VERSION

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
1.26.0-dev
1+
1.27.0-dev

‎examples/animation/blend.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,6 @@
2424

2525
// Create the application and start the update loop
2626
var app = new pc.Application(canvas);
27-
app.start();
2827

2928
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
3029
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
@@ -88,6 +87,7 @@
8887

8988
// Start alternating between run and stop
9089
setTimeout(function () {
90+
app.start();
9191
run();
9292
}, 1000);
9393
});

‎examples/assets/scripts/posteffects/posteffect-outline.js

Lines changed: 138 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,138 @@
1+
// --------------- POST EFFECT DEFINITION --------------- //
2+
Object.assign(pc, function () {
3+
4+
/**
5+
* @class
6+
* @name pc.OutlineEffect
7+
* @classdesc Applies an outline effect on input render target
8+
* @description Creates new instance of the post effect.
9+
* @augments pc.PostEffect
10+
* @param {pc.GraphicsDevice} graphicsDevice - The graphics device of the application.
11+
* @property {pc.Texture} texture The outline texture to use.
12+
* @property {pc.Color} color The outline color.
13+
*/
14+
var OutlineEffect = function (graphicsDevice) {
15+
pc.PostEffect.call(this, graphicsDevice);
16+
17+
this.shader = new pc.Shader(graphicsDevice, {
18+
attributes: {
19+
aPosition: pc.SEMANTIC_POSITION
20+
},
21+
vshader: [
22+
"attribute vec2 aPosition;",
23+
"",
24+
"varying vec2 vUv0;",
25+
"",
26+
"void main(void)",
27+
"{",
28+
" gl_Position = vec4(aPosition, 0.0, 1.0);",
29+
" vUv0 = (aPosition.xy + 1.0) * 0.5;",
30+
"}"
31+
].join("\n"),
32+
fshader: [
33+
"precision " + graphicsDevice.precision + " float;",
34+
"",
35+
"uniform float uWidth;",
36+
"uniform float uHeight;",
37+
"uniform vec4 uOutlineCol;",
38+
"uniform sampler2D uColorBuffer;",
39+
"uniform sampler2D uOutlineTex;",
40+
"",
41+
"varying vec2 vUv0;",
42+
"",
43+
"void main(void)",
44+
"{",
45+
" vec4 texel1 = texture2D(uColorBuffer, vUv0);",
46+
" float sample0 = texture2D(uOutlineTex, vUv0).a;",
47+
" float outline = 0.0;",
48+
" if (sample0==0.0)",
49+
" {",
50+
" for (int x=-2;x<=2;x++)",
51+
" {",
52+
" for (int y=-2;y<=2;y++)",
53+
" { ",
54+
" float sample=texture2D(uOutlineTex, vUv0+vec2(float(x)/uWidth, float(y)/uHeight)).a;",
55+
" if (sample>0.0)",
56+
" {",
57+
" outline=1.0;",
58+
" }",
59+
" }",
60+
" } ",
61+
" }",
62+
" gl_FragColor = mix(texel1, uOutlineCol, outline);",
63+
"}"
64+
].join("\n")
65+
});
66+
67+
// Uniforms
68+
this.color = new pc.Color(1, 1, 1, 1);
69+
this.texture = new pc.Texture(graphicsDevice);
70+
this.texture.name = 'pe-outline';
71+
};
72+
73+
OutlineEffect.prototype = Object.create(pc.PostEffect.prototype);
74+
OutlineEffect.prototype.constructor = OutlineEffect;
75+
76+
Object.assign(OutlineEffect.prototype, {
77+
render: function (inputTarget, outputTarget, rect) {
78+
var device = this.device;
79+
var scope = device.scope;
80+
81+
scope.resolve("uWidth").setValue(inputTarget.width);
82+
scope.resolve("uHeight").setValue(inputTarget.height);
83+
scope.resolve("uOutlineCol").setValue(this.color.data);
84+
scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
85+
scope.resolve("uOutlineTex").setValue(this.texture);
86+
pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
87+
}
88+
});
89+
90+
return {
91+
OutlineEffect: OutlineEffect
92+
};
93+
}());
94+
95+
// ----------------- SCRIPT DEFINITION ------------------ //
96+
var Outline = pc.createScript('outline');
97+
98+
Outline.attributes.add('color', {
99+
type: 'rgb',
100+
default: [0.5, 0.5, 0.5, 1],
101+
title: 'Color'
102+
});
103+
104+
Outline.attributes.add('texture', {
105+
type: 'asset',
106+
assetType: 'texture',
107+
title: 'Texture'
108+
});
109+
110+
Outline.prototype.initialize = function () {
111+
this.effect = new pc.OutlineEffect(this.app.graphicsDevice);
112+
this.effect.color = this.color;
113+
this.effect.texture = this.texture.resource;
114+
115+
var queue = this.entity.camera.postEffects;
116+
117+
queue.addEffect(this.effect);
118+
119+
this.on('state', function (enabled) {
120+
if (enabled) {
121+
queue.addEffect(this.effect);
122+
} else {
123+
queue.removeEffect(this.effect);
124+
}
125+
});
126+
127+
this.on('destroy', function () {
128+
queue.removeEffect(this.effect);
129+
});
130+
131+
this.on('attr:color', function (value) {
132+
this.effect.color = value;
133+
}, this);
134+
135+
this.on('attr:texture', function (value) {
136+
this.effect.texture = value ? value.resource : null;
137+
}, this);
138+
};

‎examples/assets/textures/flakes5c.png

139 KB
Loading

‎examples/assets/textures/flakes5n.png

568 KB
Loading

‎examples/assets/textures/flakes5o.png

144 KB
Loading

‎examples/camera/first-person.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,6 @@
3535
mouse: new pc.Mouse(document.body),
3636
touch: new pc.TouchDevice(document.body)
3737
});
38-
app.start();
3938

4039
// Set the canvas to fill the window and automatically change
4140
// resolution to be the same as the canvas size
@@ -73,6 +72,8 @@
7372
});
7473

7574
function run() {
75+
app.start();
76+
7677
// Create a physical floor
7778
var floor = new pc.Entity();
7879
floor.addComponent("collision", {

‎examples/examples.js

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -20,9 +20,12 @@ var categories = [
2020
"lights",
2121
"lights-baked",
2222
"loader-obj",
23+
"material-anisotropic",
24+
"material-clear-coat",
2325
"material-physical",
2426
"model-asset",
2527
"model-box",
28+
"model-outline",
2629
"model-shapes",
2730
"model-textured-box",
2831
"point-cloud",
@@ -53,7 +56,8 @@ var categories = [
5356
}, {
5457
name: "physics",
5558
examples: [
56-
"falling-shapes"
59+
"falling-shapes",
60+
"raycast"
5761
]
5862
}, {
5963
name: "sound",

‎examples/graphics/loader-obj.html

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,6 @@
2626

2727
// Create the app and start the update loop
2828
var app = new pc.Application(canvas);
29-
app.start();
3029

3130
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
3231
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
@@ -49,6 +48,8 @@
4948
var url = "../assets/models/monkey/monkey.obj";
5049

5150
app.assets.loadFromUrl(url, "model", function (err, asset) {
51+
app.start();
52+
5253
entity = new pc.Entity();
5354
entity.addComponent("model");
5455
entity.model.model = asset.resource;

‎examples/graphics/material-anisotropic.html

Lines changed: 128 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,128 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>PlayCanvas Anisotropic Material</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/output/playcanvas.js"></script>
9+
<style>
10+
body {
11+
margin: 0;
12+
overflow-y: hidden;
13+
}
14+
</style>
15+
</head>
16+
17+
<body>
18+
<!-- The canvas element -->
19+
<canvas id="application-canvas"></canvas>
20+
21+
<!-- The script -->
22+
<script>
23+
var canvas = document.getElementById("application-canvas");
24+
25+
// Create the application and start the update loop
26+
var app = new pc.Application(canvas);
27+
app.start();
28+
29+
// Set the canvas to fill the window and automatically change resolution to be the same as the canvas size
30+
app.setCanvasFillMode(pc.FILLMODE_FILL_WINDOW);
31+
app.setCanvasResolution(pc.RESOLUTION_AUTO);
32+
33+
window.addEventListener("resize", function () {
34+
app.resizeCanvas(canvas.width, canvas.height);
35+
});
36+
37+
app.scene.gammaCorrection = pc.GAMMA_SRGB;
38+
app.scene.toneMapping = pc.TONEMAP_ACES;
39+
// Set the skybox to the 128x128 cubemap mipmap level
40+
app.scene.skyboxMip = 1;
41+
42+
// Create an entity with a camera component
43+
var camera = new pc.Entity();
44+
camera.addComponent("camera");
45+
camera.translate(0, 6, 6);
46+
camera.rotate(-48, 0, 0);
47+
app.root.addChild(camera);
48+
49+
// Create an entity with a directional light component
50+
var light = new pc.Entity();
51+
light.addComponent("light", {
52+
type: "directional"
53+
});
54+
app.root.addChild(light);
55+
var e = light.getLocalEulerAngles();
56+
light.setLocalEulerAngles(e.x+90, e.y-75, e.z);
57+
58+
// Load a cubemap asset. This DDS file was 'prefiltered' in the
59+
// PlayCanvas Editor and then downloaded.
60+
var cubemapAsset = new pc.Asset('helipad.dds', 'cubemap', {
61+
url: "../assets/cubemaps/helipad.dds"
62+
});
63+
app.assets.add(cubemapAsset);
64+
app.assets.load(cubemapAsset);
65+
cubemapAsset.ready(function () {
66+
// Mark the cubemaps as RGBM format since it's an HDR cubemap
67+
cubemapAsset.resources.forEach(function (cubemap) {
68+
cubemap.rgbm = true;
69+
});
70+
app.scene.setSkybox(cubemapAsset.resources);
71+
});
72+
73+
var NUM_SPHERES_X = 11;
74+
var NUM_SPHERES_Z = 6;
75+
76+
var createSphere = function (x, y, z) {
77+
var material = new pc.StandardMaterial();
78+
material.metalness = 1.0;
79+
material.shininess = (z) / (NUM_SPHERES_Z - 1) * 100;
80+
material.useMetalness = true;
81+
material.anisotropy = ((2*x / (NUM_SPHERES_X - 1))-1.0)*-1.0;
82+
material.enableGGXSpecular = true;
83+
material.update();
84+
85+
var sphere = new pc.Entity();
86+
87+
sphere.addComponent("model", {
88+
material: material,
89+
type: "sphere"
90+
});
91+
sphere.setLocalPosition(x - (NUM_SPHERES_X - 1) * 0.5, y, z - (NUM_SPHERES_Z - 1) * 0.5);
92+
sphere.setLocalScale(0.7, 0.7, 0.7);
93+
app.root.addChild(sphere);
94+
}
95+
96+
var createText = function (fontAsset, message, x, y, z, rotx, roty) {
97+
// Create a text element-based entity
98+
var text = new pc.Entity();
99+
text.addComponent("element", {
100+
anchor: [ 0.5, 0.5, 0.5, 0.5 ],
101+
fontAsset: fontAsset,
102+
fontSize: 0.5,
103+
pivot: [ 0.5, 0.5 ],
104+
text: message,
105+
type: pc.ELEMENTTYPE_TEXT
106+
});
107+
text.setLocalPosition(x, y, z);
108+
text.setLocalEulerAngles(rotx, roty, 0);
109+
app.root.addChild(text);
110+
}
111+
112+
for (var i = 0; i < NUM_SPHERES_Z; i++) {
113+
for (var j = 0; j < NUM_SPHERES_X; j++) {
114+
createSphere(j, 0, i);
115+
}
116+
}
117+
118+
// Load a font
119+
var fontAsset = new pc.Asset('arial.json', "font", {url: "../assets/fonts/arial.json"});
120+
fontAsset.on('load', function () {
121+
createText(fontAsset, 'Anisotropy', 0, 0, ((NUM_SPHERES_Z + 1) * 0.5),-90, 0);
122+
createText(fontAsset, 'Roughness', -(NUM_SPHERES_X + 1) * 0.5, 0, 0,-90, 90);
123+
});
124+
app.assets.add(fontAsset);
125+
app.assets.load(fontAsset);
126+
</script>
127+
</body>
128+
</html>

0 commit comments

Comments
 (0)