@babylonjs/post-processes 5.0.0-rc.0 → 5.0.0-rc.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/asciiArt/asciiArtPostProcess.d.ts +107 -106
- package/asciiArt/asciiArtPostProcess.js +206 -205
- package/asciiArt/asciiArtPostProcess.js.map +1 -1
- package/asciiArt/asciiart.fragment.d.ts +5 -5
- package/asciiArt/asciiart.fragment.js +8 -6
- package/asciiArt/asciiart.fragment.js.map +1 -1
- package/asciiArt/index.d.ts +1 -1
- package/asciiArt/index.js +1 -1
- package/asciiArt/index.js.map +1 -1
- package/digitalRain/digitalRainPostProcess.d.ts +107 -106
- package/digitalRain/digitalRainPostProcess.js +216 -215
- package/digitalRain/digitalRainPostProcess.js.map +1 -1
- package/digitalRain/digitalrain.fragment.d.ts +5 -5
- package/digitalRain/digitalrain.fragment.js +8 -6
- package/digitalRain/digitalrain.fragment.js.map +1 -1
- package/digitalRain/index.d.ts +1 -1
- package/digitalRain/index.js +1 -1
- package/digitalRain/index.js.map +1 -1
- package/index.d.ts +2 -2
- package/index.js +3 -2
- package/index.js.map +1 -1
- package/legacy/legacy-asciiArt.d.ts +1 -1
- package/legacy/legacy-asciiArt.js +13 -12
- package/legacy/legacy-asciiArt.js.map +1 -1
- package/legacy/legacy-digitalRain.d.ts +1 -1
- package/legacy/legacy-digitalRain.js +13 -12
- package/legacy/legacy-digitalRain.js.map +1 -1
- package/legacy/legacy.d.ts +1 -1
- package/legacy/legacy.js +14 -13
- package/legacy/legacy.js.map +1 -1
- package/package.json +21 -55
- package/readme.md +2 -2
@@ -1,106 +1,107 @@
|
|
1
|
-
import { Nullable } from "@babylonjs/core/types";
|
2
|
-
import { Camera } from "@babylonjs/core/Cameras/camera";
|
3
|
-
import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture";
|
4
|
-
import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess";
|
5
|
-
import { Scene } from "@babylonjs/core/scene";
|
6
|
-
import "@babylonjs/core/Engines/Extensions/engine.dynamicTexture";
|
7
|
-
import "./asciiart.fragment";
|
8
|
-
/**
|
9
|
-
* AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.
|
10
|
-
*
|
11
|
-
* It basically takes care rendering the font front the given font size to a texture.
|
12
|
-
* This is used later on in the postprocess.
|
13
|
-
*/
|
14
|
-
export declare class AsciiArtFontTexture extends BaseTexture {
|
15
|
-
private _font;
|
16
|
-
private _text;
|
17
|
-
private _charSize;
|
18
|
-
/**
|
19
|
-
* Gets the size of one char in the texture (each char fits in size * size space in the texture).
|
20
|
-
*/
|
21
|
-
get charSize(): number;
|
22
|
-
/**
|
23
|
-
* Create a new instance of the Ascii Art FontTexture class
|
24
|
-
* @param name the name of the texture
|
25
|
-
* @param font the font to use, use the W3C CSS notation
|
26
|
-
* @param text the caracter set to use in the rendering.
|
27
|
-
* @param scene the scene that owns the texture
|
28
|
-
*/
|
29
|
-
constructor(name: string, font: string, text: string, scene?: Nullable<Scene>);
|
30
|
-
/**
|
31
|
-
* Gets the max char width of a font.
|
32
|
-
* @param font the font to use, use the W3C CSS notation
|
33
|
-
* @return the max char width
|
34
|
-
*/
|
35
|
-
private
|
36
|
-
/**
|
37
|
-
* Gets the max char height of a font.
|
38
|
-
* @param font the font to use, use the W3C CSS notation
|
39
|
-
* @return the max char height
|
40
|
-
*/
|
41
|
-
private
|
42
|
-
/**
|
43
|
-
* Clones the current AsciiArtTexture.
|
44
|
-
* @return the clone of the texture.
|
45
|
-
*/
|
46
|
-
clone(): AsciiArtFontTexture;
|
47
|
-
/**
|
48
|
-
* Parses a json object representing the texture and returns an instance of it.
|
49
|
-
* @param source the source JSON representation
|
50
|
-
* @param scene the scene to create the texture for
|
51
|
-
* @return the parsed texture
|
52
|
-
*/
|
53
|
-
static Parse(source: any, scene: Scene): AsciiArtFontTexture;
|
54
|
-
}
|
55
|
-
/**
|
56
|
-
* Option available in the Ascii Art Post Process.
|
57
|
-
*/
|
58
|
-
export interface IAsciiArtPostProcessOptions {
|
59
|
-
/**
|
60
|
-
* The font to use following the w3c font definition.
|
61
|
-
*/
|
62
|
-
font?: string;
|
63
|
-
/**
|
64
|
-
* The character set to use in the postprocess.
|
65
|
-
*/
|
66
|
-
characterSet?: string;
|
67
|
-
/**
|
68
|
-
* This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
|
69
|
-
* This number is defined between 0 and 1;
|
70
|
-
*/
|
71
|
-
mixToTile?: number;
|
72
|
-
/**
|
73
|
-
* This defines the amount you want to mix the normal rendering pass in the ascii art.
|
74
|
-
* This number is defined between 0 and 1;
|
75
|
-
*/
|
76
|
-
mixToNormal?: number;
|
77
|
-
}
|
78
|
-
/**
|
79
|
-
* AsciiArtPostProcess helps rendering everithing in Ascii Art.
|
80
|
-
*
|
81
|
-
* Simmply add it to your scene and let the nerd that lives in you have fun.
|
82
|
-
* Example usage: var pp = new AsciiArtPostProcess("myAscii", "20px Monospace", camera);
|
83
|
-
*/
|
84
|
-
export declare class AsciiArtPostProcess extends PostProcess {
|
85
|
-
/**
|
86
|
-
* The font texture used to render the char in the post process.
|
87
|
-
*/
|
88
|
-
private _asciiArtFontTexture;
|
89
|
-
/**
|
90
|
-
* This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
|
91
|
-
* This number is defined between 0 and 1;
|
92
|
-
*/
|
93
|
-
mixToTile: number;
|
94
|
-
/**
|
95
|
-
* This defines the amount you want to mix the normal rendering pass in the ascii art.
|
96
|
-
* This number is defined between 0 and 1;
|
97
|
-
*/
|
98
|
-
mixToNormal: number;
|
99
|
-
/**
|
100
|
-
* Instantiates a new Ascii Art Post Process.
|
101
|
-
* @param name the name to give to the postprocess
|
102
|
-
* @camera the camera to apply the post process to.
|
103
|
-
* @param
|
104
|
-
|
105
|
-
|
106
|
-
|
1
|
+
import type { Nullable } from "@babylonjs/core/types.js";
|
2
|
+
import type { Camera } from "@babylonjs/core/Cameras/camera.js";
|
3
|
+
import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
|
4
|
+
import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess.js";
|
5
|
+
import type { Scene } from "@babylonjs/core/scene.js";
|
6
|
+
import "@babylonjs/core/Engines/Extensions/engine.dynamicTexture.js";
|
7
|
+
import "./asciiart.fragment";
|
8
|
+
/**
|
9
|
+
* AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.
|
10
|
+
*
|
11
|
+
* It basically takes care rendering the font front the given font size to a texture.
|
12
|
+
* This is used later on in the postprocess.
|
13
|
+
*/
|
14
|
+
export declare class AsciiArtFontTexture extends BaseTexture {
|
15
|
+
private _font;
|
16
|
+
private _text;
|
17
|
+
private _charSize;
|
18
|
+
/**
|
19
|
+
* Gets the size of one char in the texture (each char fits in size * size space in the texture).
|
20
|
+
*/
|
21
|
+
get charSize(): number;
|
22
|
+
/**
|
23
|
+
* Create a new instance of the Ascii Art FontTexture class
|
24
|
+
* @param name the name of the texture
|
25
|
+
* @param font the font to use, use the W3C CSS notation
|
26
|
+
* @param text the caracter set to use in the rendering.
|
27
|
+
* @param scene the scene that owns the texture
|
28
|
+
*/
|
29
|
+
constructor(name: string, font: string, text: string, scene?: Nullable<Scene>);
|
30
|
+
/**
|
31
|
+
* Gets the max char width of a font.
|
32
|
+
* @param font the font to use, use the W3C CSS notation
|
33
|
+
* @return the max char width
|
34
|
+
*/
|
35
|
+
private _getFontWidth;
|
36
|
+
/**
|
37
|
+
* Gets the max char height of a font.
|
38
|
+
* @param font the font to use, use the W3C CSS notation
|
39
|
+
* @return the max char height
|
40
|
+
*/
|
41
|
+
private _getFontHeight;
|
42
|
+
/**
|
43
|
+
* Clones the current AsciiArtTexture.
|
44
|
+
* @return the clone of the texture.
|
45
|
+
*/
|
46
|
+
clone(): AsciiArtFontTexture;
|
47
|
+
/**
|
48
|
+
* Parses a json object representing the texture and returns an instance of it.
|
49
|
+
* @param source the source JSON representation
|
50
|
+
* @param scene the scene to create the texture for
|
51
|
+
* @return the parsed texture
|
52
|
+
*/
|
53
|
+
static Parse(source: any, scene: Scene): AsciiArtFontTexture;
|
54
|
+
}
|
55
|
+
/**
|
56
|
+
* Option available in the Ascii Art Post Process.
|
57
|
+
*/
|
58
|
+
export interface IAsciiArtPostProcessOptions {
|
59
|
+
/**
|
60
|
+
* The font to use following the w3c font definition.
|
61
|
+
*/
|
62
|
+
font?: string;
|
63
|
+
/**
|
64
|
+
* The character set to use in the postprocess.
|
65
|
+
*/
|
66
|
+
characterSet?: string;
|
67
|
+
/**
|
68
|
+
* This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
|
69
|
+
* This number is defined between 0 and 1;
|
70
|
+
*/
|
71
|
+
mixToTile?: number;
|
72
|
+
/**
|
73
|
+
* This defines the amount you want to mix the normal rendering pass in the ascii art.
|
74
|
+
* This number is defined between 0 and 1;
|
75
|
+
*/
|
76
|
+
mixToNormal?: number;
|
77
|
+
}
|
78
|
+
/**
|
79
|
+
* AsciiArtPostProcess helps rendering everithing in Ascii Art.
|
80
|
+
*
|
81
|
+
* Simmply add it to your scene and let the nerd that lives in you have fun.
|
82
|
+
* Example usage: var pp = new AsciiArtPostProcess("myAscii", "20px Monospace", camera);
|
83
|
+
*/
|
84
|
+
export declare class AsciiArtPostProcess extends PostProcess {
|
85
|
+
/**
|
86
|
+
* The font texture used to render the char in the post process.
|
87
|
+
*/
|
88
|
+
private _asciiArtFontTexture;
|
89
|
+
/**
|
90
|
+
* This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
|
91
|
+
* This number is defined between 0 and 1;
|
92
|
+
*/
|
93
|
+
mixToTile: number;
|
94
|
+
/**
|
95
|
+
* This defines the amount you want to mix the normal rendering pass in the ascii art.
|
96
|
+
* This number is defined between 0 and 1;
|
97
|
+
*/
|
98
|
+
mixToNormal: number;
|
99
|
+
/**
|
100
|
+
* Instantiates a new Ascii Art Post Process.
|
101
|
+
* @param name the name to give to the postprocess
|
102
|
+
* @camera the camera to apply the post process to.
|
103
|
+
* @param camera
|
104
|
+
* @param options can either be the font name or an option object following the IAsciiArtPostProcessOptions format
|
105
|
+
*/
|
106
|
+
constructor(name: string, camera: Camera, options?: string | IAsciiArtPostProcessOptions);
|
107
|
+
}
|
@@ -1,206 +1,207 @@
|
|
1
|
-
import { __decorate, __extends } from "tslib";
|
2
|
-
import { serialize, SerializationHelper } from "@babylonjs/core/Misc/decorators.js";
|
3
|
-
import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
|
4
|
-
import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
|
5
|
-
import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess.js";
|
6
|
-
import "@babylonjs/core/Engines/Extensions/engine.dynamicTexture.js";
|
7
|
-
import "./asciiart.fragment.js";
|
8
|
-
/**
|
9
|
-
* AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.
|
10
|
-
*
|
11
|
-
* It basically takes care rendering the font front the given font size to a texture.
|
12
|
-
* This is used later on in the postprocess.
|
13
|
-
*/
|
14
|
-
var AsciiArtFontTexture = /** @class */ (function (_super) {
|
15
|
-
__extends(AsciiArtFontTexture, _super);
|
16
|
-
/**
|
17
|
-
* Create a new instance of the Ascii Art FontTexture class
|
18
|
-
* @param name the name of the texture
|
19
|
-
* @param font the font to use, use the W3C CSS notation
|
20
|
-
* @param text the caracter set to use in the rendering.
|
21
|
-
* @param scene the scene that owns the texture
|
22
|
-
*/
|
23
|
-
function AsciiArtFontTexture(name, font, text, scene) {
|
24
|
-
if (scene === void 0) { scene = null; }
|
25
|
-
var _this = _super.call(this, scene) || this;
|
26
|
-
scene = _this.getScene();
|
27
|
-
if (!scene) {
|
28
|
-
return _this;
|
29
|
-
}
|
30
|
-
_this.name = name;
|
31
|
-
_this._text == text;
|
32
|
-
_this._font == font;
|
33
|
-
_this.wrapU = Texture.CLAMP_ADDRESSMODE;
|
34
|
-
_this.wrapV = Texture.CLAMP_ADDRESSMODE;
|
35
|
-
//this.anisotropicFilteringLevel = 1;
|
36
|
-
// Get the font specific info.
|
37
|
-
var maxCharHeight = _this.
|
38
|
-
var maxCharWidth = _this.
|
39
|
-
_this._charSize = Math.max(maxCharHeight.height, maxCharWidth);
|
40
|
-
// This is an approximate size, but should always be able to fit at least the maxCharCount.
|
41
|
-
var textureWidth = Math.ceil(_this._charSize * text.length);
|
42
|
-
var textureHeight = _this._charSize;
|
43
|
-
// Create the texture that will store the font characters.
|
44
|
-
_this._texture = scene.getEngine().createDynamicTexture(textureWidth, textureHeight, false, Texture.NEAREST_SAMPLINGMODE);
|
45
|
-
//scene.getEngine().setclamp
|
46
|
-
var textureSize = _this.getSize();
|
47
|
-
// Create a canvas with the final size: the one matching the texture.
|
48
|
-
var canvas = document.createElement("canvas");
|
49
|
-
canvas.width = textureSize.width;
|
50
|
-
canvas.height = textureSize.height;
|
51
|
-
var context = canvas.getContext("2d");
|
52
|
-
context.textBaseline = "top";
|
53
|
-
context.font = font;
|
54
|
-
context.fillStyle = "white";
|
55
|
-
context.imageSmoothingEnabled = false;
|
56
|
-
// Sets the text in the texture.
|
57
|
-
for (var i = 0; i < text.length; i++) {
|
58
|
-
context.fillText(text[i], i * _this._charSize, -maxCharHeight.offset);
|
59
|
-
}
|
60
|
-
// Flush the text in the dynamic texture.
|
61
|
-
scene.getEngine().updateDynamicTexture(_this._texture, canvas, false, true);
|
62
|
-
return _this;
|
63
|
-
}
|
64
|
-
Object.defineProperty(AsciiArtFontTexture.prototype, "charSize", {
|
65
|
-
/**
|
66
|
-
* Gets the size of one char in the texture (each char fits in size * size space in the texture).
|
67
|
-
*/
|
68
|
-
get: function () {
|
69
|
-
return this._charSize;
|
70
|
-
},
|
71
|
-
enumerable: false,
|
72
|
-
configurable: true
|
73
|
-
});
|
74
|
-
/**
|
75
|
-
* Gets the max char width of a font.
|
76
|
-
* @param font the font to use, use the W3C CSS notation
|
77
|
-
* @return the max char width
|
78
|
-
*/
|
79
|
-
AsciiArtFontTexture.prototype.
|
80
|
-
var fontDraw = document.createElement("canvas");
|
81
|
-
var ctx = fontDraw.getContext(
|
82
|
-
ctx.fillStyle =
|
83
|
-
ctx.font = font;
|
84
|
-
return ctx.measureText("W").width;
|
85
|
-
};
|
86
|
-
// More info here: https://videlais.com/2014/03/16/the-many-and-varied-problems-with-measuring-font-height-for-html5-canvas/
|
87
|
-
/**
|
88
|
-
* Gets the max char height of a font.
|
89
|
-
* @param font the font to use, use the W3C CSS notation
|
90
|
-
* @return the max char height
|
91
|
-
*/
|
92
|
-
AsciiArtFontTexture.prototype.
|
93
|
-
var fontDraw = document.createElement("canvas");
|
94
|
-
var ctx = fontDraw.getContext(
|
95
|
-
ctx.fillRect(0, 0, fontDraw.width, fontDraw.height);
|
96
|
-
ctx.textBaseline =
|
97
|
-
ctx.fillStyle =
|
98
|
-
ctx.font = font;
|
99
|
-
ctx.fillText(
|
100
|
-
var pixels = ctx.getImageData(0, 0, fontDraw.width, fontDraw.height).data;
|
101
|
-
var start = -1;
|
102
|
-
var end = -1;
|
103
|
-
for (var row = 0; row < fontDraw.height; row++) {
|
104
|
-
for (var column = 0; column < fontDraw.width; column++) {
|
105
|
-
var index = (row * fontDraw.width + column) * 4;
|
106
|
-
if (pixels[index] === 0) {
|
107
|
-
if (column === fontDraw.width - 1 && start !== -1) {
|
108
|
-
end = row;
|
109
|
-
row = fontDraw.height;
|
110
|
-
break;
|
111
|
-
}
|
112
|
-
continue;
|
113
|
-
}
|
114
|
-
else {
|
115
|
-
if (start === -1) {
|
116
|
-
start = row;
|
117
|
-
}
|
118
|
-
break;
|
119
|
-
}
|
120
|
-
}
|
121
|
-
}
|
122
|
-
return { height:
|
123
|
-
};
|
124
|
-
/**
|
125
|
-
* Clones the current AsciiArtTexture.
|
126
|
-
* @return the clone of the texture.
|
127
|
-
*/
|
128
|
-
AsciiArtFontTexture.prototype.clone = function () {
|
129
|
-
return new AsciiArtFontTexture(this.name, this._font, this._text, this.getScene());
|
130
|
-
};
|
131
|
-
/**
|
132
|
-
* Parses a json object representing the texture and returns an instance of it.
|
133
|
-
* @param source the source JSON representation
|
134
|
-
* @param scene the scene to create the texture for
|
135
|
-
* @return the parsed texture
|
136
|
-
*/
|
137
|
-
AsciiArtFontTexture.Parse = function (source, scene) {
|
138
|
-
var texture = SerializationHelper.Parse(function () { return new AsciiArtFontTexture(source.name, source.font, source.text, scene); }, source, scene, null);
|
139
|
-
return texture;
|
140
|
-
};
|
141
|
-
__decorate([
|
142
|
-
serialize("font")
|
143
|
-
], AsciiArtFontTexture.prototype, "_font", void 0);
|
144
|
-
__decorate([
|
145
|
-
serialize("text")
|
146
|
-
], AsciiArtFontTexture.prototype, "_text", void 0);
|
147
|
-
return AsciiArtFontTexture;
|
148
|
-
}(BaseTexture));
|
149
|
-
export { AsciiArtFontTexture };
|
150
|
-
/**
|
151
|
-
* AsciiArtPostProcess helps rendering everithing in Ascii Art.
|
152
|
-
*
|
153
|
-
* Simmply add it to your scene and let the nerd that lives in you have fun.
|
154
|
-
* Example usage: var pp = new AsciiArtPostProcess("myAscii", "20px Monospace", camera);
|
155
|
-
*/
|
156
|
-
var AsciiArtPostProcess = /** @class */ (function (_super) {
|
157
|
-
__extends(AsciiArtPostProcess, _super);
|
158
|
-
/**
|
159
|
-
* Instantiates a new Ascii Art Post Process.
|
160
|
-
* @param name the name to give to the postprocess
|
161
|
-
* @camera the camera to apply the post process to.
|
162
|
-
* @param
|
163
|
-
|
164
|
-
|
165
|
-
|
166
|
-
|
167
|
-
|
168
|
-
|
169
|
-
|
170
|
-
|
171
|
-
* This
|
172
|
-
|
173
|
-
|
174
|
-
|
175
|
-
|
176
|
-
* This
|
177
|
-
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
var
|
182
|
-
|
183
|
-
|
184
|
-
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
_this.
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
196
|
-
|
197
|
-
|
198
|
-
effect.
|
199
|
-
effect.setFloat4("
|
200
|
-
|
201
|
-
|
202
|
-
|
203
|
-
|
204
|
-
|
205
|
-
|
1
|
+
import { __decorate, __extends } from "tslib";
|
2
|
+
import { serialize, SerializationHelper } from "@babylonjs/core/Misc/decorators.js";
|
3
|
+
import { BaseTexture } from "@babylonjs/core/Materials/Textures/baseTexture.js";
|
4
|
+
import { Texture } from "@babylonjs/core/Materials/Textures/texture.js";
|
5
|
+
import { PostProcess } from "@babylonjs/core/PostProcesses/postProcess.js";
|
6
|
+
import "@babylonjs/core/Engines/Extensions/engine.dynamicTexture.js";
|
7
|
+
import "./asciiart.fragment.js";
|
8
|
+
/**
|
9
|
+
* AsciiArtFontTexture is the helper class used to easily create your ascii art font texture.
|
10
|
+
*
|
11
|
+
* It basically takes care rendering the font front the given font size to a texture.
|
12
|
+
* This is used later on in the postprocess.
|
13
|
+
*/
|
14
|
+
var AsciiArtFontTexture = /** @class */ (function (_super) {
|
15
|
+
__extends(AsciiArtFontTexture, _super);
|
16
|
+
/**
|
17
|
+
* Create a new instance of the Ascii Art FontTexture class
|
18
|
+
* @param name the name of the texture
|
19
|
+
* @param font the font to use, use the W3C CSS notation
|
20
|
+
* @param text the caracter set to use in the rendering.
|
21
|
+
* @param scene the scene that owns the texture
|
22
|
+
*/
|
23
|
+
function AsciiArtFontTexture(name, font, text, scene) {
|
24
|
+
if (scene === void 0) { scene = null; }
|
25
|
+
var _this = _super.call(this, scene) || this;
|
26
|
+
scene = _this.getScene();
|
27
|
+
if (!scene) {
|
28
|
+
return _this;
|
29
|
+
}
|
30
|
+
_this.name = name;
|
31
|
+
_this._text == text;
|
32
|
+
_this._font == font;
|
33
|
+
_this.wrapU = Texture.CLAMP_ADDRESSMODE;
|
34
|
+
_this.wrapV = Texture.CLAMP_ADDRESSMODE;
|
35
|
+
//this.anisotropicFilteringLevel = 1;
|
36
|
+
// Get the font specific info.
|
37
|
+
var maxCharHeight = _this._getFontHeight(font);
|
38
|
+
var maxCharWidth = _this._getFontWidth(font);
|
39
|
+
_this._charSize = Math.max(maxCharHeight.height, maxCharWidth);
|
40
|
+
// This is an approximate size, but should always be able to fit at least the maxCharCount.
|
41
|
+
var textureWidth = Math.ceil(_this._charSize * text.length);
|
42
|
+
var textureHeight = _this._charSize;
|
43
|
+
// Create the texture that will store the font characters.
|
44
|
+
_this._texture = scene.getEngine().createDynamicTexture(textureWidth, textureHeight, false, Texture.NEAREST_SAMPLINGMODE);
|
45
|
+
//scene.getEngine().setclamp
|
46
|
+
var textureSize = _this.getSize();
|
47
|
+
// Create a canvas with the final size: the one matching the texture.
|
48
|
+
var canvas = document.createElement("canvas");
|
49
|
+
canvas.width = textureSize.width;
|
50
|
+
canvas.height = textureSize.height;
|
51
|
+
var context = canvas.getContext("2d");
|
52
|
+
context.textBaseline = "top";
|
53
|
+
context.font = font;
|
54
|
+
context.fillStyle = "white";
|
55
|
+
context.imageSmoothingEnabled = false;
|
56
|
+
// Sets the text in the texture.
|
57
|
+
for (var i = 0; i < text.length; i++) {
|
58
|
+
context.fillText(text[i], i * _this._charSize, -maxCharHeight.offset);
|
59
|
+
}
|
60
|
+
// Flush the text in the dynamic texture.
|
61
|
+
scene.getEngine().updateDynamicTexture(_this._texture, canvas, false, true);
|
62
|
+
return _this;
|
63
|
+
}
|
64
|
+
Object.defineProperty(AsciiArtFontTexture.prototype, "charSize", {
|
65
|
+
/**
|
66
|
+
* Gets the size of one char in the texture (each char fits in size * size space in the texture).
|
67
|
+
*/
|
68
|
+
get: function () {
|
69
|
+
return this._charSize;
|
70
|
+
},
|
71
|
+
enumerable: false,
|
72
|
+
configurable: true
|
73
|
+
});
|
74
|
+
/**
|
75
|
+
* Gets the max char width of a font.
|
76
|
+
* @param font the font to use, use the W3C CSS notation
|
77
|
+
* @return the max char width
|
78
|
+
*/
|
79
|
+
AsciiArtFontTexture.prototype._getFontWidth = function (font) {
|
80
|
+
var fontDraw = document.createElement("canvas");
|
81
|
+
var ctx = fontDraw.getContext("2d");
|
82
|
+
ctx.fillStyle = "white";
|
83
|
+
ctx.font = font;
|
84
|
+
return ctx.measureText("W").width;
|
85
|
+
};
|
86
|
+
// More info here: https://videlais.com/2014/03/16/the-many-and-varied-problems-with-measuring-font-height-for-html5-canvas/
|
87
|
+
/**
|
88
|
+
* Gets the max char height of a font.
|
89
|
+
* @param font the font to use, use the W3C CSS notation
|
90
|
+
* @return the max char height
|
91
|
+
*/
|
92
|
+
AsciiArtFontTexture.prototype._getFontHeight = function (font) {
|
93
|
+
var fontDraw = document.createElement("canvas");
|
94
|
+
var ctx = fontDraw.getContext("2d");
|
95
|
+
ctx.fillRect(0, 0, fontDraw.width, fontDraw.height);
|
96
|
+
ctx.textBaseline = "top";
|
97
|
+
ctx.fillStyle = "white";
|
98
|
+
ctx.font = font;
|
99
|
+
ctx.fillText("jH|", 0, 0);
|
100
|
+
var pixels = ctx.getImageData(0, 0, fontDraw.width, fontDraw.height).data;
|
101
|
+
var start = -1;
|
102
|
+
var end = -1;
|
103
|
+
for (var row = 0; row < fontDraw.height; row++) {
|
104
|
+
for (var column = 0; column < fontDraw.width; column++) {
|
105
|
+
var index = (row * fontDraw.width + column) * 4;
|
106
|
+
if (pixels[index] === 0) {
|
107
|
+
if (column === fontDraw.width - 1 && start !== -1) {
|
108
|
+
end = row;
|
109
|
+
row = fontDraw.height;
|
110
|
+
break;
|
111
|
+
}
|
112
|
+
continue;
|
113
|
+
}
|
114
|
+
else {
|
115
|
+
if (start === -1) {
|
116
|
+
start = row;
|
117
|
+
}
|
118
|
+
break;
|
119
|
+
}
|
120
|
+
}
|
121
|
+
}
|
122
|
+
return { height: end - start + 1, offset: start - 1 };
|
123
|
+
};
|
124
|
+
/**
|
125
|
+
* Clones the current AsciiArtTexture.
|
126
|
+
* @return the clone of the texture.
|
127
|
+
*/
|
128
|
+
AsciiArtFontTexture.prototype.clone = function () {
|
129
|
+
return new AsciiArtFontTexture(this.name, this._font, this._text, this.getScene());
|
130
|
+
};
|
131
|
+
/**
|
132
|
+
* Parses a json object representing the texture and returns an instance of it.
|
133
|
+
* @param source the source JSON representation
|
134
|
+
* @param scene the scene to create the texture for
|
135
|
+
* @return the parsed texture
|
136
|
+
*/
|
137
|
+
AsciiArtFontTexture.Parse = function (source, scene) {
|
138
|
+
var texture = SerializationHelper.Parse(function () { return new AsciiArtFontTexture(source.name, source.font, source.text, scene); }, source, scene, null);
|
139
|
+
return texture;
|
140
|
+
};
|
141
|
+
__decorate([
|
142
|
+
serialize("font")
|
143
|
+
], AsciiArtFontTexture.prototype, "_font", void 0);
|
144
|
+
__decorate([
|
145
|
+
serialize("text")
|
146
|
+
], AsciiArtFontTexture.prototype, "_text", void 0);
|
147
|
+
return AsciiArtFontTexture;
|
148
|
+
}(BaseTexture));
|
149
|
+
export { AsciiArtFontTexture };
|
150
|
+
/**
|
151
|
+
* AsciiArtPostProcess helps rendering everithing in Ascii Art.
|
152
|
+
*
|
153
|
+
* Simmply add it to your scene and let the nerd that lives in you have fun.
|
154
|
+
* Example usage: var pp = new AsciiArtPostProcess("myAscii", "20px Monospace", camera);
|
155
|
+
*/
|
156
|
+
var AsciiArtPostProcess = /** @class */ (function (_super) {
|
157
|
+
__extends(AsciiArtPostProcess, _super);
|
158
|
+
/**
|
159
|
+
* Instantiates a new Ascii Art Post Process.
|
160
|
+
* @param name the name to give to the postprocess
|
161
|
+
* @camera the camera to apply the post process to.
|
162
|
+
* @param camera
|
163
|
+
* @param options can either be the font name or an option object following the IAsciiArtPostProcessOptions format
|
164
|
+
*/
|
165
|
+
function AsciiArtPostProcess(name, camera, options) {
|
166
|
+
var _this = _super.call(this, name, "asciiart", ["asciiArtFontInfos", "asciiArtOptions"], ["asciiArtFont"], {
|
167
|
+
width: camera.getEngine().getRenderWidth(),
|
168
|
+
height: camera.getEngine().getRenderHeight(),
|
169
|
+
}, camera, Texture.TRILINEAR_SAMPLINGMODE, camera.getEngine(), true) || this;
|
170
|
+
/**
|
171
|
+
* This defines the amount you want to mix the "tile" or caracter space colored in the ascii art.
|
172
|
+
* This number is defined between 0 and 1;
|
173
|
+
*/
|
174
|
+
_this.mixToTile = 0;
|
175
|
+
/**
|
176
|
+
* This defines the amount you want to mix the normal rendering pass in the ascii art.
|
177
|
+
* This number is defined between 0 and 1;
|
178
|
+
*/
|
179
|
+
_this.mixToNormal = 0;
|
180
|
+
// Default values.
|
181
|
+
var font = "40px Monospace";
|
182
|
+
var characterSet = " `-.'_:,\"=^;<+!*?/cL\\zrs7TivJtC{3F)Il(xZfY5S2eajo14[nuyE]P6V9kXpKwGhqAUbOd8#HRDB0$mgMW&Q%N@";
|
183
|
+
// Use options.
|
184
|
+
if (options) {
|
185
|
+
if (typeof options === "string") {
|
186
|
+
font = options;
|
187
|
+
}
|
188
|
+
else {
|
189
|
+
font = options.font || font;
|
190
|
+
characterSet = options.characterSet || characterSet;
|
191
|
+
_this.mixToTile = options.mixToTile || _this.mixToTile;
|
192
|
+
_this.mixToNormal = options.mixToNormal || _this.mixToNormal;
|
193
|
+
}
|
194
|
+
}
|
195
|
+
_this._asciiArtFontTexture = new AsciiArtFontTexture(name, font, characterSet, camera.getScene());
|
196
|
+
var textureSize = _this._asciiArtFontTexture.getSize();
|
197
|
+
_this.onApply = function (effect) {
|
198
|
+
effect.setTexture("asciiArtFont", _this._asciiArtFontTexture);
|
199
|
+
effect.setFloat4("asciiArtFontInfos", _this._asciiArtFontTexture.charSize, characterSet.length, textureSize.width, textureSize.height);
|
200
|
+
effect.setFloat4("asciiArtOptions", _this.width, _this.height, _this.mixToNormal, _this.mixToTile);
|
201
|
+
};
|
202
|
+
return _this;
|
203
|
+
}
|
204
|
+
return AsciiArtPostProcess;
|
205
|
+
}(PostProcess));
|
206
|
+
export { AsciiArtPostProcess };
|
206
207
|
//# sourceMappingURL=asciiArtPostProcess.js.map
|