-
-
Notifications
You must be signed in to change notification settings - Fork 4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
better shader; FIXME: change shader processing to keep initial prepro…
…cessor extensions stuff at the top of the file to avoid browser warning fix intermittent test "updates geometry with value" // NOTE: there are two paths by which geometry update can happen; // first, as after-effect of font change; // second, as direct effect when no font change. // To make this test work reliably, // modified text component so order of arguments is same in both cases. // If the first case is happening, the call may not be instantaneous, // and we would need to wait until the font is loaded. revamp a-text primitive to extend automagically from text tweak shader to perform modified alpha test (makes examples/test/text/scenarios.html look significantly better) expose zOffset more resilient to off-axis viewing angles fix missed modified-sdf --> modifiedsdf add documentation for a-text primitive finish unit tests clean up examples newlines in text value can be expressed as \n fix multiple instancing bug seen with examples/test/text/scenarios.html
- Loading branch information
1 parent
8a9839a
commit 4dc96e3
Showing
13 changed files
with
653 additions
and
382 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| --- | ||
| parent_section: primitives | ||
| --- | ||
|
|
||
| [text]: ../components/text.md | ||
| The a-text primitive renders bitmap and signed distance field font text using the [text][text] component. | ||
|
|
||
| ## Properties | ||
|
|
||
| | Property | Component Map | Description | Default Value | | ||
| |:--------------:|:------------------:|:-------------------------------------------------------:|:---------------------:| | ||
| | align | text.align | Multi-line text alignment (left, center, right). | left | | ||
| | alpha-test | text.alphaTest | Discard text pixels if alpha is less than this. | 0.5 | | ||
| | anchor | text.anchor | Horizontal positioning (left, center, right, align). | center | | ||
| | baseline | text.baseline | Vertical positioning (top, center, bottom). | center | | ||
| | color | text.color | Text color. | #000 (which is black) | | ||
| | font | text.font | Font file to render text. (stock names; or .fnt URL) | default | | ||
| | font-image | text.fontImage | Font image to render text. (from font, or override) | undefined (from font) | | ||
| | height | text.height | Height of text block. | undefined (from text) | | ||
| | letter-spacing | text.letterSpacing | The letter spacing, in pixels. | 0 | | ||
| | line-height | text.lineHeight | The line height, in pixels. | undefined (from font) | | ||
| | opacity | text.opacity | Opacity (0 = fully transparent, 1 = fully opaque) | 1.0 | | ||
| | shader | text.shader | Shader to render text. (modifiedsdf, sdf, basic, msdf) | modifiedsdf | | ||
| | side | text.side | Side to render. (front, back, double) | front | | ||
| | tabSize | text.tabSize | Tab size, in spaces. | 4 | | ||
| | transparent | text.transparent | Should text be transparent? | true | | ||
| | value | text.value | The text to render. | | | ||
| | whitespace | text.whitespace | How should whitespace be handled? (normal, pre, nowrap) | normal | | ||
| | width | text.width | Width (default = geometry width, DEFAULT_WIDTH if none) | | | ||
| | wrap-count | text.wrapCount | Wrap after this many font characters (more or less). | 40 | | ||
| | wrap-pixels | text.wrapPixels | Wrap after this many pixels. | undefined (wrapCount) | | ||
| | z-offset | text.zOffset | Z offset to apply to avoid Z-fighting. | 0.001 | | ||
|
|
||
| More details on these properties [here](https://github.com/Jam3/three-bmfont-text#usage). | ||
|
|
||
| Explanation of whitespace (formerly 'mode') property [here](https://github.com/mattdesl/word-wrapper). | ||
|
|
||
| ## Usage | ||
|
|
||
| Write some text: | ||
|
|
||
| ```html | ||
| <a-entity text="text: Hello World;"></a-entity> | ||
| ``` | ||
|
|
||
| To change the size of the text, increase width, decrease wrapCount (roughly how many characters to fit inside the given width) or wrapPixels, | ||
| use the [scale](https://aframe.io/docs/master/components/scale.html) component or position the text closer or further away. | ||
|
|
||
| Text can be wrapped by specifying width in A-Frame units. | ||
|
|
||
| ## Custom Fonts | ||
|
|
||
| A guide for generating SDF fonts can be found [here](https://github.com/libgdx/libgdx/wiki/Distance-field-fonts); | ||
| here is an example comparing [Arial Black and DejaVu](http://i.imgur.com/iWtXHm5.png). | ||
| Bitmap fonts also work, but do not look nearly as good. | ||
|
|
||
| Different fonts can be specified with the 'font' and 'fontImage' properties. | ||
|
|
||
| ```html | ||
| <a-entity text="text: Hello World; font:../fonts/DejaVu-sdf.fnt; fontImage:../fonts/DejaVu-sdf.png"> | ||
| </a-entity> | ||
| ``` | ||
|
|
||
| ## Limitations | ||
|
|
||
| This component does not make use of all of the features of [three-bmfont-text](https://github.com/Jam3/three-bmfont-text) and its sister modules. | ||
|
|
||
| Bitmap font rendering limits you to the characters included in the font (Unicode this is not). | ||
| SDF font (in particular) tends to smooth sharp edges though [there are ways around this](https://lambdacube3d.wordpress.com/2014/11/12/playing-around-with-font-rendering/). | ||
|
|
||
| #### Additional Information | ||
|
|
||
| If you are interested in text rendering in WebGL/ThreeJS/A-Frame and want to learn more, | ||
| reading the documentation for [three-bmfont-text](https://github.com/Jam3/three-bmfont-text) is recommended. | ||
|
|
||
| Here are some additional resources: | ||
|
|
||
| - ['It’s 2015 and drawing text is still hard (WebGL, ThreeJS)' by Parris Khachi](https://www.eventbrite.com/engineering/its-2015-and-drawing-text-is-still-hard-webgl-threejs/) | ||
| - [Valve's original paper](http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf) | ||
| - ['Hacking with THREE.js' by Matt DesLauriers](http://slides.com/mattdeslauriers/hacking-with-three-js#/13) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,87 @@ | ||
| <html> | ||
| <head> | ||
| <title>Text Anchors</title> | ||
| <meta name="description" content="Text Anchors - A-Frame"> | ||
| <script src="../../../dist/aframe-master.js"></script> | ||
| </head> | ||
| <body> | ||
| <a-scene auto-enter-vr="display:all"> | ||
| <a-assets> | ||
| <a-mixin | ||
| id="marker" | ||
| geometry="primitive: plane; width: 0.057; height: 0.057" | ||
| material="color: #C03546" | ||
| ></a-mixin> | ||
| </a-assets> | ||
|
|
||
| <a-entity id="marker0" mixin="marker" position="0 0 -3.99"></a-entity> | ||
| <a-entity id="marker1" mixin="marker" position="0 1 -3.99"></a-entity> | ||
| <a-entity id="marker2" mixin="marker" position="0 2 -3.99"></a-entity> | ||
| <a-entity id="marker3" mixin="marker" position="0 3 -3.99"></a-entity> | ||
| <a-entity id="marker4" mixin="marker" position="0 4 -3.99"></a-entity> | ||
| <a-entity id="marker5" mixin="marker" position="0 5 -3.99"></a-entity> | ||
| <a-entity id="marker6" mixin="marker" position="0 6 -3.99"></a-entity> | ||
| <a-entity id="marker7" mixin="marker" position="0 7 -3.99"></a-entity> | ||
|
|
||
| <a-entity | ||
| position="0 0 -4" | ||
| geometry="primitive: plane; width: 2" | ||
| material="color: #0000FF" | ||
| text="color: white; align: center; font: dejavu; | ||
| value: a-text align='center' (anchor='align') DejaVu width 2 123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890123456789012345678901234567890" | ||
| ></a-entity> | ||
|
|
||
| <a-text | ||
| id="textPrimitive" | ||
| position="0 1 -4" | ||
| align="left" anchor="left" width="5" | ||
| value="anchor='left' (default align) 123456789012345678901234567890123456789012345678901234567890"> | ||
| </a-text> | ||
|
|
||
| <a-entity | ||
| position="0 2 -4" | ||
| geometry="primitive: plane; width: 5" | ||
| material="color: #333333" | ||
| text="color: white; anchor: center; font: sourcecodepro; | ||
| value: anchor='center' (default align) SourceCodePro 123456789012345678901234567890123456789012345678901234567890" | ||
| ></a-entity> | ||
|
|
||
| <a-entity | ||
| position="0 3 -4" | ||
| text="color: white; baseline: top; anchor: right; width: 5; font: aileronsemibold; | ||
| value: anchor='right' baseline='top' (default align) Aileron-Semibold 123456789012345678901234567890123456789012345678901234567890" | ||
| ></a-entity> | ||
|
|
||
| <a-entity | ||
| position="0 4 -4" | ||
| text="color: white; align: left; width: 5; font: exo2semibold; | ||
| value: align='left' (default anchor) Exo2SemiBold 123456789012345678901234567890123456789012345678901234567890" | ||
| ></a-entity> | ||
|
|
||
| <a-entity | ||
| position="0 5 -4" | ||
| text="color: white; align: center; width: 5; font: kelsonsans; | ||
| value: align='center' (default anchor) KelsonSans 123456789012345678901234567890123456789012345678901234567890" | ||
| ></a-entity> | ||
|
|
||
| <a-entity | ||
| position="0 6 -4" | ||
| text="color: white; align: right; width: 5; font: monoid; | ||
| value: align='right' (default anchor) Monoid 123456789012345678901234567890123456789012345678901234567890" | ||
| ></a-entity> | ||
|
|
||
| <a-entity | ||
| position="0 7 -4" | ||
| geometry="primitive: plane; width: 8; height: auto" | ||
| material="color: #0000FF" | ||
| text="color: white; align: center; font: dejavu; | ||
| value: a-plane align:center (anchor:align) DejaVu width 8 1234567890123456789012345678901234567890"> | ||
| </a-entity> | ||
|
|
||
| <a-sky color="#222"></a-sky> | ||
| <a-entity position="0.0 3.8 1.5"> | ||
| <a-entity camera look-controls wasd-controls></a-entity> | ||
| </a-entity> | ||
| </a-scene> | ||
| </body> | ||
| </html> |
Oops, something went wrong.