Skip to content

Commit 6fe0240

Browse files
willeastcottwilleastcott
authored
Don't add post effects to the pc namespace (playcanvas#2782)
* Don't add post effects to the pc namespace * Gracefully handle no blend map being set * Update post effects example * Further tidy ups for post effects example
1 parent 1157dc5 commit 6fe0240

14 files changed

Lines changed: 1378 additions & 1454 deletions

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

Lines changed: 69 additions & 75 deletions
Original file line numberDiff line numberDiff line change
@@ -1,87 +1,79 @@
11
// --------------- POST EFFECT DEFINITION --------------- //
2-
Object.assign(pc, function () {
3-
4-
/**
5-
* @class
6-
* @name pc.BlendEffect
7-
* @classdesc Blends the input render target with another texture.
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} blendMap The texture with which to blend the input render target with.
12-
* @property {number} mixRatio The amount of blending between the input and the blendMap. Ranges from 0 to 1.
13-
*/
14-
var BlendEffect = 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 uMixRatio;",
36-
"uniform sampler2D uColorBuffer;",
37-
"uniform sampler2D uBlendMap;",
38-
"",
39-
"varying vec2 vUv0;",
40-
"",
41-
"void main(void)",
42-
"{",
43-
" vec4 texel1 = texture2D(uColorBuffer, vUv0);",
44-
" vec4 texel2 = texture2D(uBlendMap, vUv0);",
45-
" gl_FragColor = mix(texel1, texel2, uMixRatio);",
46-
"}"
47-
].join("\n")
48-
});
49-
50-
// Uniforms
51-
this.mixRatio = 0.5;
52-
this.blendMap = new pc.Texture(graphicsDevice);
53-
this.blendMap.name = 'pe-blend';
54-
};
55-
56-
BlendEffect.prototype = Object.create(pc.PostEffect.prototype);
57-
BlendEffect.prototype.constructor = BlendEffect;
58-
59-
Object.assign(BlendEffect.prototype, {
60-
render: function (inputTarget, outputTarget, rect) {
61-
var device = this.device;
62-
var scope = device.scope;
63-
64-
scope.resolve("uMixRatio").setValue(this.mixRatio);
65-
scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
66-
scope.resolve("uBlendMap").setValue(this.blendMap);
67-
pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
68-
}
2+
/**
3+
* @class
4+
* @name BlendEffect
5+
* @classdesc Blends the input render target with another texture.
6+
* @description Creates new instance of the post effect.
7+
* @augments pc.PostEffect
8+
* @param {pc.GraphicsDevice} graphicsDevice - The graphics device of the application.
9+
* @property {pc.Texture} blendMap The texture with which to blend the input render target with.
10+
* @property {number} mixRatio The amount of blending between the input and the blendMap. Ranges from 0 to 1.
11+
*/
12+
function BlendEffect(graphicsDevice) {
13+
pc.PostEffect.call(this, graphicsDevice);
14+
15+
this.shader = new pc.Shader(graphicsDevice, {
16+
attributes: {
17+
aPosition: pc.SEMANTIC_POSITION
18+
},
19+
vshader: [
20+
"attribute vec2 aPosition;",
21+
"",
22+
"varying vec2 vUv0;",
23+
"",
24+
"void main(void)",
25+
"{",
26+
" gl_Position = vec4(aPosition, 0.0, 1.0);",
27+
" vUv0 = (aPosition.xy + 1.0) * 0.5;",
28+
"}"
29+
].join("\n"),
30+
fshader: [
31+
"precision " + graphicsDevice.precision + " float;",
32+
"",
33+
"uniform float uMixRatio;",
34+
"uniform sampler2D uColorBuffer;",
35+
"uniform sampler2D uBlendMap;",
36+
"",
37+
"varying vec2 vUv0;",
38+
"",
39+
"void main(void)",
40+
"{",
41+
" vec4 texel1 = texture2D(uColorBuffer, vUv0);",
42+
" vec4 texel2 = texture2D(uBlendMap, vUv0);",
43+
" gl_FragColor = mix(texel1, texel2, uMixRatio);",
44+
"}"
45+
].join("\n")
6946
});
7047

71-
return {
72-
BlendEffect: BlendEffect
73-
};
74-
}());
48+
// Uniforms
49+
this.mixRatio = 0.5;
50+
this.blendMap = new pc.Texture(graphicsDevice);
51+
this.blendMap.name = 'pe-blend';
52+
}
53+
54+
BlendEffect.prototype = Object.create(pc.PostEffect.prototype);
55+
BlendEffect.prototype.constructor = BlendEffect;
56+
57+
Object.assign(BlendEffect.prototype, {
58+
render: function (inputTarget, outputTarget, rect) {
59+
var device = this.device;
60+
var scope = device.scope;
61+
62+
scope.resolve("uMixRatio").setValue(this.mixRatio);
63+
scope.resolve("uColorBuffer").setValue(inputTarget.colorBuffer);
64+
scope.resolve("uBlendMap").setValue(this.blendMap);
65+
pc.drawFullscreenQuad(device, outputTarget, this.vertexBuffer, this.shader, rect);
66+
}
67+
});
7568

7669
// ----------------- SCRIPT DEFINITION ------------------ //
7770
var Blend = pc.createScript('blend');
7871

7972
Blend.attributes.add('mixRatio', {
8073
type: 'number',
81-
default: 1,
74+
default: 0.5,
8275
min: 0,
8376
max: 1,
84-
precision: 5,
8577
title: 'Mix Ratio'
8678
});
8779

@@ -92,9 +84,11 @@ Blend.attributes.add('blendMap', {
9284
});
9385

9486
Blend.prototype.initialize = function () {
95-
this.effect = new pc.BlendEffect(this.app.graphicsDevice);
87+
this.effect = new BlendEffect(this.app.graphicsDevice);
9688
this.effect.mixRatio = this.mixRatio;
97-
this.effect.blendMap = this.blendMap.resource;
89+
if (this.blendMap) {
90+
this.effect.blendMap = this.blendMap.resource;
91+
}
9892

9993
var queue = this.entity.camera.postEffects;
10094

0 commit comments

Comments
 (0)