biipadmin/Burn-My-Windows
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

📝 Update tutorial

Browse Source
This commit is contained in:
Simon Schneegans
2022-05-14 21:09:19 +02:00
parent 0da73cf675
commit 1262089e82
1 changed files with 74 additions and 106 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docs/how-to-create-new-effects.md
+74 -106
View File
@@ -77,11 +77,55 @@ Just remember to replace `simple-fade` with your custom name!
### 2. Creating the Effect Class ### 2. Creating the Effect Class
You will have to create a new file called `src/SimpleFade.js` and paste the following code to it. You will have to create a new GLSL file called `resources/shaders/simple-fade.glsl` and a new JavaScript source file called `src/SimpleFade.js`.
Simply paste the following source code to the respective file.
Please study this code carefully, all of it is explained with inline comments. Please study this code carefully, all of it is explained with inline comments.
<details> <details>
<summary>Expand this to show the code.</summary> <summary>Expand this to show the GLSL code.</summary>
```glsl
// The code below injects some standard uniforms which will be updated during the
// animation. This includes:
// bool uForOpening: True if a window-open animation is ongoing, false otherwise.
// sampler2D uTexture: Contains the texture of the window.
// float uProgress: A value which transitions from 0 to 1 during the entire animation.
// float uTime: A steadily increasing value in seconds.
// vec2 uSize: The size of uTexture in pixels.
#include "common/uniforms.glsl"
// The width of the fading effect is loaded from the settings.
uniform float uFadeWidth;
void main() {
// Get the color from the window texture.
cogl_color_out = texture2D(uTexture, cogl_tex_coord_in[0].st);
// Shell.GLSLEffect uses straight alpha. So we have to convert from premultiplied.
if (cogl_color_out.a > 0) {
cogl_color_out.rgb /= cogl_color_out.a;
}
// Radial distance from window edge to the window's center.
float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
// This gradually dissolves from [1..0] from the outside to the center. We
// switch the direction for opening and closing.
float progress = uForOpening ? 1.0 - uProgress : uProgress;
float mask = (1.0 - progress * (1.0 + uFadeWidth) - dist + uFadeWidth) / uFadeWidth;
// Make the mask smoother.
mask = smoothstep(0, 1, mask);
// Apply the mask to the output.
cogl_color_out.a *= mask;
}
```
</details>
<details>
<summary>Expand this to show the JavaScript code.</summary>
```javascript ```javascript
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
@@ -106,25 +150,41 @@ const _ = imports.gettext.domain('burn-my-windows').gettext;
const ExtensionUtils = imports.misc.extensionUtils; const ExtensionUtils = imports.misc.extensionUtils;
const Me = imports.misc.extensionUtils.getCurrentExtension(); const Me = imports.misc.extensionUtils.getCurrentExtension();
const utils = Me.imports.src.utils; const utils = Me.imports.src.utils;
const ShaderFactory = Me.imports.src.ShaderFactory.ShaderFactory;
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
// This effect ... // // This effect ... //
// <- Please add a description of your effect here -> // // <- Please add a description of your effect here -> //
////////////////////////////////////////////////////////////////////////////////////////// //////////////////////////////////////////////////////////////////////////////////////////
// The shader class for this effect is registered further down in this file. When this // The effect class can be used to get some metadata (like the effect's name or supported
// effect is used for the first time, an instance of this shader class is created. Once // GNOME Shell versions), to initialize the respective page of the settings dialog, as
// the effect is finished, the shader will be stored in the freeShaders array and will // well as to create the actual shader for the effect.
// then be reused if a new shader is requested. ShaderClass which will be used whenever
// this effect is used.
let ShaderClass = null;
let freeShaders = [];
// The effect class is completely static. It can be used to get some metadata (like the
// effect's name or supported GNOME Shell versions), to initialize the respective page of
// the settings dialog, as well as to create the actual shader for the effect.
var SimpleFade = class SimpleFade { var SimpleFade = class SimpleFade {
// The constructor creates a ShaderFactory which will be used by extension.js to create
// shader instances for this effect. The shaders will be automagically created using the
// GLSL file in resources/shaders/<nick>.glsl. The callback will be called for each
// newly created shader instance.
constructor() {
this.shaderFactory = new ShaderFactory(this.getNick(), (shader) => {
// We import Clutter in this function as it is not available in the preferences
// process. This creator function of the ShaderFactory is only called within GNOME
// Shell's process.
const Clutter = imports.gi.Clutter;
// Store uniform locations of newly created shaders.
shader._uForOpening = shader.get_uniform_location('uForOpening');
shader._uFadeWidth = shader.get_uniform_location('uFadeWidth');
// Write all uniform values at the start of each animation.
shader.connect('begin-animation', (shader, settings) => {
shader.set_uniform_float(shader._uForOpening, 1, [forOpening]);
shader.set_uniform_float(shader._uFadeWidth, 1, [settings.get_double('simple-fade-width')]);
});
});
}
// ---------------------------------------------------------------------------- metadata // ---------------------------------------------------------------------------- metadata
// The effect is available on all GNOME Shell versions supported by this extension. // The effect is available on all GNOME Shell versions supported by this extension.
@@ -158,23 +218,6 @@ var SimpleFade = class SimpleFade {
// ---------------------------------------------------------------- API for extension.js // ---------------------------------------------------------------- API for extension.js
// This is called from extension.js whenever a window is opened or closed with this
// effect. It returns an instance of the shader class, trying to reuse previously
// created shaders.
getShader(actor, settings, forOpening) {
let shader;
if (freeShaders.length == 0) {
shader = new ShaderClass();
} else {
shader = freeShaders.pop();
}
shader.updateAnimation(actor, settings, forOpening);
return shader;
}
// The getActorScale() is called from extension.js to adjust the actor's size during the // The getActorScale() is called from extension.js to adjust the actor's size during the
// animation. This is useful if the effect requires drawing something beyond the usual // animation. This is useful if the effect requires drawing something beyond the usual
// bounds of the actor. This only works for GNOME 3.38+. // bounds of the actor. This only works for GNOME 3.38+.
@@ -182,81 +225,6 @@ var SimpleFade = class SimpleFade {
return {x: 1.0, y: 1.0}; return {x: 1.0, y: 1.0};
} }
} }
//////////////////////////////////////////////////////////////////////////////////////////
// The shader class for this effect will only be registered in GNOME Shell's process //
// (not in the preferences process). It's done this way as Clutter may not be installed //
// on the system and therefore the preferences would crash. //
//////////////////////////////////////////////////////////////////////////////////////////
if (utils.isInShellProcess()) {
const Shell = imports.gi.Shell;
const shaderSnippets = Me.imports.src.shaderSnippets;
ShaderClass = GObject.registerClass({}, class ShaderClass extends Shell.GLSLEffect {
_init(settings, forOpening) {
super._init({shader_type: Clutter.ShaderType.FRAGMENT_SHADER});
this._uForOpening = this.get_uniform_location('uForOpening');
this._uFadeWidth = this.get_uniform_location('uFadeWidth');
}
// This is called each time the shader is used. This can be used to retrieve the
// configuration from the settings and update all uniforms accordingly.
updateAnimation(actor, settings, forOpening) {
this.set_uniform_float(this._uForOpening, 1, [forOpening]);
this.set_uniform_float(this._uFadeWidth, 1, [settings.get_double('simple-fade-width')]);
}
// This is called by extension.js when the shader is not used anymore. We will store
// this instance of the shader so that it can be re-used in th future.
free() {
freeShaders.push(this);
}
// This is called by the constructor. This means, it's only called when the effect
// is used for the first time.
vfunc_build_pipeline() {
const declarations = `
// The code below injects some standard uniforms which will be updated during the
// animation. This includes:
// bool uForOpening: True if a window-open animation is ongoing, false otherwise.
// sampler2D uTexture: Contains the texture of the window.
// float uProgress: A value which transitions from 0 to 1 during the entire animation.
// float uTime: A steadily increasing value in seconds.
// vec2 uSize: The size of uTexture in pixels.
#include "common/uniforms.glsl"
// The width of the fading effect is loaded from the settings.
uniform float uFadeWidth;
`;
const code = `
// Get the color from the window texture.
vec4 windowColor = texture2D(uTexture, cogl_tex_coord_in[0].st);
// Radial distance from window edge to the window's center.
float dist = length(cogl_tex_coord_in[0].st - 0.5) * 2.0 / sqrt(2.0);
// This gradually dissolves from [1..0] from the outside to the center. We
// switch the direction for opening and closing.
float progress = uForOpening ? 1.0 - uProgress : uProgress;
float mask = (1.0 - progress * (1.0 + uFadeWidth) - dist + uFadeWidth) / uFadeWidth;
// Make the mask smoother.
mask = smoothstep(0, 1, mask);
// Set the final output color. This uses premultiplied alpha.
cogl_color_out = windowColor * mask;
`;
this.add_glsl_snippet(Shell.SnippetHook.FRAGMENT, declarations, code, true);
};
});
}
``` ```
</details> </details>
@@ -270,7 +238,7 @@ Like this:
```javascript ```javascript
const ALL_EFFECTS = [ const ALL_EFFECTS = [
... ...
Me.imports.src.SimpleFade.SimpleFade, new Me.imports.src.SimpleFade.SimpleFade(),
... ...
]; ];
``` ```