Skip to content

Commit 7700c4f

Browse files
raytranukraytranuk
committed
Some rendering fixes - still stuff TODO
TODO: Support fonts with mutliple atlases
1 parent 9d129e5 commit 7700c4f

File tree

12 files changed

+36
-19
lines changed

12 files changed

+36
-19
lines changed

‎examples/assets/fonts/Arial-v4/Arial.json

Lines changed: 1 addition & 0 deletions
Large diffs are not rendered by default.

‎examples/assets/fonts/Arial_1.png renamed to ‎examples/assets/fonts/Arial-v4/Arial.png

106 KB
Loading

‎examples/assets/fonts/Arial-v4/ArialA.png

72.9 KB
Loading

‎examples/assets/fonts/Arial3/Arial.json

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/assets/fonts/Arial3/Arial.png

-124 KB
Binary file not shown.

‎examples/assets/fonts/Arial3/ArialA.png

-53.4 KB
Binary file not shown.

‎examples/assets/fonts/Arial_1.json

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/assets/fonts/Arial_2.json

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎examples/assets/fonts/Arial_2.png

-138 KB
Binary file not shown.

‎examples/user-interface/text-outline.html

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -85,14 +85,14 @@
8585
text2.setLocalPosition(0, -150, 0);
8686

8787
// Load a font
88-
var fontAsset = new pc.Asset('Arial_1.json', "font", {url: "../assets/fonts/Arial_1.json"});
88+
var fontAsset = new pc.Asset('arial.json', "font", {url: "../assets/fonts/arial.json"});
8989
fontAsset.on('load', function () {
9090
// Apply the font to the text element
9191
text.element.fontAsset = fontAsset;
9292
});
9393

9494
//var fontAsset2 = new pc.Asset('OpenSans-Bold.json', "font", {url: "../assets/fonts/OpenSans-Bold.json"});
95-
var fontAsset2 = new pc.Asset('Arial.json', "font", {url: "../assets/fonts/Arial3/Arial.json"});
95+
var fontAsset2 = new pc.Asset('Arial.json', "font", {url: "../assets/fonts/Arial4/Arial.json"});
9696
fontAsset2.on('load', function () {
9797
// Apply the font to the text element
9898
text2.element.fontAsset = fontAsset2;
@@ -105,14 +105,16 @@
105105

106106
// Set an update function on the app's update event
107107
var thickness = 0;
108+
var pingpong = 1;
108109
app.on("update", function (dt) {
109-
thickness += dt;
110-
if (thickness > 5) {
111-
thickness = 0;
110+
thickness += dt*pingpong;
111+
if (thickness > 5 || thickness < 0) {
112+
pingpong = -pingpong;
113+
thickness = pc.math.clamp(thickness, 0, 5);
112114
}
113115

114116
//text.element.outlineThickness=thickness;
115-
//text2.element.outlineThickness=thickness;
117+
text2.element.outlineThickness=thickness;
116118
});
117119
</script>
118120
</body>

‎src/framework/components/element/text-element.js

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -103,7 +103,7 @@ Object.assign(pc, function () {
103103

104104
this._outlineColor = new pc.Color(0, 0, 0, 1);
105105
this._outlineColorUniform = new Float32Array(4);
106-
this._outlineThicknessScale = 0.1; // was 0.2 now 0.1 - coefficient to map editor range of 0 - 1 to shader value
106+
this._outlineThicknessScale = 0.2; //0.1; // was 0.2 now 0.1 - coefficient to map editor range of 0 - 1 to shader value
107107
this._outlineThickness = 0.0;
108108

109109
this._multiPassEnabled = false; // when true multi pass text rendering is enabled for correct thicker outline rendering
@@ -1664,14 +1664,14 @@ Object.assign(pc, function () {
16641664
this._updateText();
16651665

16661666
// if font version has changed we will need to change the _outlineThicknessScale and update the material parameter
1667-
if (value.data.version !== previousFontVersion) {
1668-
this._outlineThicknessScale = (this._font.data.version==3) ? 0.2 : 0.1;
1667+
/*if (value.data.version !== previousFontVersion) {
1668+
this._outlineThicknessScale = (this._font.data.version == 3) ? 0.2 : 0.1;
16691669
16701670
for (var i = 0; i < this._model.meshInstances.length; i++) {
16711671
var mi = this._model.meshInstances[i];
16721672
mi.setParameter("outline_thickness", this._outlineThicknessScale * Math.min(this._outlineThickness,(this._font.data.version==3) ? 1.0 : 5.0));
16731673
}
1674-
}
1674+
}*/
16751675
}
16761676
});
16771677

‎src/graphics/program-lib/chunks/msdf.frag

Lines changed: 23 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -42,31 +42,48 @@ vec4 applyMsdf(vec4 color) {
4242
float sigDist = median(tsample.r, tsample.g, tsample.b);
4343
float sigDistShdw = median(ssample.r, ssample.g, ssample.b);
4444

45+
float t_outline_thickness = outline_thickness;
46+
float t_font_pxrange = font_pxrange;
47+
4548
#ifdef MSDFA
49+
float num = float(sigDist<0.5)*clamp((outline_thickness-0.2)*5.0,0.0,1.0);
50+
51+
t_outline_thickness=mix(outline_thickness, outline_thickness*0.25+0.02, num);
52+
53+
//float tsamplea = min(texture2D(texture_msdfMapA, vUv0).r, sigDist);
54+
//float ssamplea = min(texture2D(texture_msdfMapA, uvShdw).r, sigDistShdw);
55+
// sigDist=mix(sigDist,tsamplea, float(outline_thickness>0.2)*clamp((0.3-tsamplea)*10.0,0.0,1.0));
56+
// sigDistShdw=mix(sigDistShdw,ssamplea, float(outline_thickness>0.2)*clamp((0.3-ssamplea)*10.0,0.0,1.0));
57+
58+
//float num = float(sigDist<0.5)*clamp((t_outline_thickness-0.2)*20.0,0.0,1.0);
59+
4660
float tsamplea = texture2D(texture_msdfMapA, vUv0).r;
4761
float ssamplea = texture2D(texture_msdfMapA, uvShdw).r;
48-
sigDist=mix(sigDist,tsamplea, clamp((0.4-tsamplea)*10.0,0.0,1.0));
49-
sigDistShdw=mix(sigDistShdw,ssamplea, clamp((0.4-ssamplea)*10.0,0.0,1.0));
62+
63+
sigDist=mix(sigDist, tsamplea, num);
64+
sigDistShdw=mix(sigDistShdw, ssamplea, num);
65+
66+
t_font_pxrange=mix(font_pxrange, font_pxrange*4.0, num);
5067
#endif
5168

5269
#ifdef USE_FWIDTH
5370
// smoothing depends on size of texture on screen
5471
vec2 w = fwidth(vUv0);
55-
float smoothing = clamp(w.x * font_textureWidth / font_pxrange, 0.0, 0.5);
72+
float smoothing = clamp(w.x * font_textureWidth / t_font_pxrange, 0.0, 0.5);
5673
#else
5774
float font_size = 16.0; // TODO fix this
5875
// smoothing gets smaller as the font size gets bigger
5976
// don't have fwidth we can approximate from font size, this doesn't account for scaling
6077
// so a big font scaled down will be wrong...
61-
float smoothing = clamp(font_pxrange / font_size, 0.0, 0.5);
78+
float smoothing = clamp(t_font_pxrange / font_size, 0.0, 0.5);
6279
#endif
6380
float mapMin = 0.05;
6481
float mapMax = clamp(1.0 - font_sdfIntensity, mapMin, 1.0);
6582

6683
// remap to a smaller range (used on smaller font sizes)
6784
float sigDistInner = map(mapMin, mapMax, sigDist);
68-
float sigDistOutline = map(mapMin, mapMax, sigDist + outline_thickness);
69-
sigDistShdw = map(mapMin, mapMax, sigDistShdw + outline_thickness);
85+
float sigDistOutline = map(mapMin, mapMax, sigDist + t_outline_thickness);
86+
sigDistShdw = map(mapMin, mapMax, sigDistShdw + t_outline_thickness);
7087

7188
float center = 0.5;
7289
// calculate smoothing and use to generate opacity

0 commit comments

Comments
 (0)