Horde3D Wiki - User contributions [en]

Preprocessing Technique - Distance Field Vector Textures

2009-01-12T04:09:57Z

Vurlix:

{| border="0"
| {{ContentBlock|width=800|color=white
|content={{!!}}

== Overview ==
Distance field textures are suitable for representing vector art such as fonts or other contour shapes. This article describes how such textures can be generated using simple Adobe Photoshop layer effects.

'''Requirements:''' 
- Basic knowledge of Adobe Photoshop.

== Generating the distance field ==

1. Create a new high resolution image that will hold the distance field (I used 1024x1024 in my example) 
1. Use a black background 
2. Put your high resolution shape in a layer above the black background. The shape must be transparent on the outside and a solid color on the inside. 
3. Apply these layer effects to your shape layer: 
- Color overlay (#808080, normal blend mode) 
- Outer glow (#808080, normal blend mode, 100% opacity, technique:precise, spread:0, size:150) 
- Inner glow (#FFFFFF, normal blend mode, 100% opacity, technique:precise, source:center, choke:0, size:150) 
4. You can adjust the inner and outer glow size, but they must have the same value for best effect. 
5. (optional) Use '''Image->Reveal All''' to resize the canvas to show all the glow parts (necessary for effects like drop shadow). 
6. Use '''Image->Canvas Size''' to make the image square (just copy the larger number over the smaller one and click ok) 

At this point you can save this high resolution version of the distance field for archiving. 

7. Use '''Layer->Flatten Image''' to bake all the effects in. 
8. Resize the image down to something much smaller (preferably power of two size) 
9. (optional) Use '''Image->Mode->Grayscale''' (flatten if prompted) to reduce file size. 

That's it! Save a copy of this small distance field and enjoy.

== Preview ==
You can get a preview of what the rendered distance field looks like inside photoshop: 
1. Use '''Layer->New Adjustment Layer->Threshold''' and accept the default threshold value 128. 
2. Put the threshold adjustment layer above the distance field layer so that it affects the layers beneath. 
Simply toggle that new adjustment layer's visibility to turn the preview on/off. 
3. Use '''Image->Image Size''' to scale up the image by some amount (like 800%), specify bilinear filtering to better approximate the result. 

== How to use it ==
The low resolution distance field texture retains the contour features as it is scaled. It suffices to discard texels with a value below 0.5 while rendering the texture with a pixel shader or fixed function renderer with alpha testing enabled.

== Advanced Usage ==
Todo...

== Pictures ==
64x64 distance field: 
http://lh6.ggpht.com/_fBoewYrxMFA/SWmUXCSQMcI/AAAAAAAAAPs/73jH7qmFiuQ/s144/smiley-dist2.png

512x512 blowup of distance field, alpha tested: 
http://lh3.ggpht.com/_fBoewYrxMFA/SWmUXHZ5_cI/AAAAAAAAAP0/EkwufndXZeM/s800/smiley-blowup2.png

== To-Do List for this Article ==
- Provide a simple shader that performs the alpha testing 
- Provide examples of advanced usage such as drop shadows, bevels, strokes, smoothing 

== References ==
[http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf Improved Alpha-Tested Magniﬁcation for Vector Textures and Special Effects, Valve Software]

}}
| valign="top" | {{Extension_Summary
|name = Technique - Distance Field Vector Textures
|screenshot =
|description = Using Adobe Photoshop to generate textures suitable for efficient vector art rendering
|version = 1.0
|horde3dversion = 1.0 beta
|released = 2009-01-11
|author = [http://www.horde3d.org/forums/memberlist.php?mode=viewprofile&u=173 Vurlix]|
}}
|}
[[category: Technique]]

Preprocessing Technique - Distance Field Vector Textures

2009-01-11T21:59:04Z

Vurlix:

{| border="0"
| {{ContentBlock|width=800|color=white
|content={{!!}}

== Overview ==
Distance field textures are suitable for representing vector art such as fonts or other contour shapes. This article describes how such textures can be generated using simple Adobe Photoshop layer effects.

'''Requirements:''' 
- Basic knowledge of Adobe Photoshop.

== Generating the distance field ==

1. Create a new high resolution image that will hold the distance field (I used 1024x1024 in my example) 
1. Use a black background 
2. Put your high resolution shape in a layer above the black background. The shape must be transparent on the outside and a solid color on the inside. 
3. Apply these layer effects to your shape layer: 
- Color overlay (#808080, normal blend mode) 
- Outer glow (#808080, normal blend mode, 100% opacity, technique:precise, spread:0, size:150) 
- Inner glow (#FFFFFF, normal blend mode, 100% opacity, technique:precise, source:center, choke:0, size:150) 
4. You can adjust the inner and outer glow size, but they must have the same value for best effect. 
5. (optional) Use '''Image->Reveal All''' to resize the canvas to show all the glow parts. 
6. Use '''Image->Canvas Size''' to make the image square (just copy the larger number over the smaller one and click ok) 

At this point you can save this high resolution version of the distance field for archiving. 

7. Use '''Layer->Flatten Image''' to bake all the effects in. 
8. Resize the image down to something much smaller (preferably power of two size) 
9. (optional) Use '''Image->Mode->Grayscale''' (flatten if prompted) to reduce file size. 

That's it! Save a copy of this small distance field and enjoy.

== Preview ==
You can get a preview of what the rendered distance field looks like inside photoshop: 
1. Use '''Layer->New Adjustment Layer->Threshold''' and accept the default threshold value 128. 
2. Put the threshold adjustment layer above the distance field layer so that it affects the layers beneath. 
Simply toggle that new adjustment layer's visibility to turn the preview on/off. 
3. Use '''Image->Image Size''' to scale up the image by some amount (like 800%), specify bilinear filtering to better approximate the result. 

== How to use it ==
The low resolution distance field texture retains the contour features as it is scaled. It suffices to discard texels with a value below 0.5 while rendering the texture with a pixel shader or fixed function renderer with alpha testing enabled.

== Advanced Usage ==
Todo...

== Pictures ==
64x64 distance field: 
http://lh6.ggpht.com/_fBoewYrxMFA/SWmUXCSQMcI/AAAAAAAAAPs/73jH7qmFiuQ/s144/smiley-dist2.png

512x512 blowup of distance field, alpha tested: 
http://lh3.ggpht.com/_fBoewYrxMFA/SWmUXHZ5_cI/AAAAAAAAAP0/EkwufndXZeM/s800/smiley-blowup2.png

== To-Do List for this Article ==
- Provide a simple shader that performs the alpha testing 
- Provide examples of advanced usage such as drop shadows, bevels, strokes, smoothing 

== References ==
[http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf Improved Alpha-Tested Magniﬁcation for Vector Textures and Special Effects, Valve Software]

}}
| valign="top" | {{Extension_Summary
|name = Technique - Distance Field Vector Textures
|screenshot =
|description = Using Adobe Photoshop to generate textures suitable for efficient vector art rendering
|version = 1.0
|horde3dversion = 1.0 beta
|released = 2009-01-11
|author = [http://www.horde3d.org/forums/memberlist.php?mode=viewprofile&u=173 Vurlix]|
}}
|}
[[category: Technique]]

Preprocessing Technique - Distance Field Vector Textures

2009-01-11T21:51:34Z

Vurlix:

{| border="0"
| {{ContentBlock|width=800|color=white
|content={{!!}}

== Overview ==
Distance field textures are suitable for representing vector art such as fonts or other contour shapes. This article describes how such textures can be generated using simple Adobe Photoshop layer effects.

'''Requirements:''' 
- Basic knowledge of Adobe Photoshop.

== Generating the distance field ==

1. Create a new high resolution image that will hold the distance field (I used 1024x1024 in my example) 
1. Use a black background 
2. Put your high resolution shape in a layer above the black background. The shape needs to be transparent on the outside and a solid color on the inside. 
3. Apply these layer effects to your shape layer: 
- Color overlay (#808080, normal blend mode) 
- Outer glow (#808080, normal blend mode, 100% opacity, technique:precise, spread:0, size:150) 
- Inner glow (#FFFFFF, normal blend mode, 100% opacity, technique:precise, source:center, choke:0, size:150) 
4. You can adjust the inner and outer glow size, but they must have the same value for best effect. 
5. (optional) Use '''Image->Reveal All''' to resize the canvas to show all the glow parts. 
6. Use '''Image->Canvas Size''' to make the image square (just copy the larger number over the smaller one and click ok) 

At this point you can save this high resolution version of the distance field for archiving. 

7. Use '''Layer->Flatten Image''' to bake all the effects in. 
8. Resize the image down to something much smaller (preferably power of two size) 
9. (optional) Use '''Image->Mode->Grayscale''' (flatten if prompted) to reduce file size. 

That's it! Save a copy of this small distance field and enjoy.

== Preview ==
You can get a preview of what the rendered distance field looks like inside photoshop: 
1. Use '''Layer->New Adjustment Layer->Threshold''' and accept the default threshold value 128. 
2. Put the threshold adjustment layer above the distance field layer so that it affects the layers beneath. 
Simply toggle that new adjustment layer's visibility to turn the preview on/off. 
3. Use '''Image->Image Size''' to scale up the image by some amount (like 800%), specify bilinear filtering to better approximate the result. 

== How to use it ==
The low resolution distance field texture retains the contour features as it is scaled. It suffices to discard texels with a value below 0.5 while rendering the texture with a pixel shader or fixed function renderer with alpha testing enabled.

== Advanced Usage ==
Todo...

== Pictures ==
64x64 distance field: 
http://lh6.ggpht.com/_fBoewYrxMFA/SWmUXCSQMcI/AAAAAAAAAPs/73jH7qmFiuQ/s144/smiley-dist2.png

512x512 blowup of distance field, alpha tested: 
http://lh3.ggpht.com/_fBoewYrxMFA/SWmUXHZ5_cI/AAAAAAAAAP0/EkwufndXZeM/s800/smiley-blowup2.png

== To-Do List for this Article ==
- Provide a simple shader that performs the alpha testing 
- Provide examples of advanced usage such as drop shadows, bevels, strokes, smoothing 

== References ==
[http://www.valvesoftware.com/publications/2007/SIGGRAPH2007_AlphaTestedMagnification.pdf Improved Alpha-Tested Magniﬁcation for Vector Textures and Special Effects, Valve Software]

}}
| valign="top" | {{Extension_Summary
|name = Technique - Distance Field Vector Textures
|screenshot =
|description = Using Adobe Photoshop to generate textures suitable for efficient vector art rendering
|version = 1.0
|horde3dversion = 1.0 beta
|released = 2009-01-11
|author = [http://www.horde3d.org/forums/memberlist.php?mode=viewprofile&u=173 Vurlix]|
}}
|}
[[category: Technique]]

Preprocessing Technique - Distance Field Vector Textures

2009-01-11T21:50:11Z

Vurlix: New page: {| border="0" | {{ContentBlock|width=800|color=white |content={{!!}} == Overview == Distance field textures are suitable for representing vector art such as fonts or other contour shape...

{| border="0"
| {{ContentBlock|width=800|color=white
|content={{!!}}

== Overview ==
Distance field textures are suitable for representing vector art such as fonts or other contour shapes. This article describes how such textures can be generated using simple Adobe Photoshop layer effects.

'''Requirements:''' 
- Basic knowledge of Adobe Photoshop.

== Generating the distance field ==

1. Create a new high resolution image that will hold the distance field (I used 1024x1024 in my example) 
1. Use a black background 
2. Put your high resolution shape in a layer above the black background. The shape needs to be transparent on the outside and a solid color on the inside. 
3. Apply these layer effects to your shape layer: 
- Color overlay (#808080, normal blend mode) 
- Outer glow (#808080, normal blend mode, 100% opacity, technique:precise, spread:0, size:150) 
- Inner glow (#FFFFFF, normal blend mode, 100% opacity, technique:precise, source:center, choke:0, size:150) 
4. You can adjust the inner and outer glow size, but they must have the same value for best effect. 
5. (optional) Use '''Image->Reveal All''' to resize the canvas to show all the glow parts. 
6. Use '''Image->Canvas Size''' to make the image square (just copy the larger number over the smaller one and click ok) 

At this point you can save this high resolution version of the distance field for archiving. 

7. Use '''Layer->Flatten Image''' to bake all the effects in. 
8. Resize the image down to something much smaller (preferably power of two size) 
9. (optional) Use '''Image->Mode->Grayscale''' (flatten if prompted) to reduce file size. 

That's it! Save a copy of this small distance field and enjoy.

== Preview ==
You can get a preview of what the rendered distance field looks like inside photoshop: 
1. Use '''Layer->New Adjustment Layer->Threshold''' and accept the default threshold value 128. 
2. Put the threshold adjustment layer above the distance field layer so that it affects the layers beneath. 
Simply toggle that new adjustment layer's visibility to turn the preview on/off. 
3. Use '''Image->Image Size''' to scale up the image by some amount (like 800%), specify bilinear filtering to better approximate the result. 

== How to use it ==
The low resolution distance field texture retains the contour features as it is scaled. It suffices to discard texels with a value below 0.5 while rendering the texture with a pixel shader or fixed function renderer with alpha testing enabled.

== Advanced Usage ==
Todo...

== Pictures ==
64x64 distance field: 
http://lh6.ggpht.com/_fBoewYrxMFA/SWmUXCSQMcI/AAAAAAAAAPs/73jH7qmFiuQ/s144/smiley-dist2.png

512x512 blowup of distance field, alpha tested: 
http://lh3.ggpht.com/_fBoewYrxMFA/SWmUXHZ5_cI/AAAAAAAAAP0/EkwufndXZeM/s800/smiley-blowup2.png

== To-Do List for this Article ==
- Provide a simple shader that performs the alpha testing 
- Provide examples of advanced usage such as drop shadows, bevels, strokes, smoothing 

}}
| valign="top" | {{Extension_Summary
|name = Technique - Distance Field Vector Textures
|screenshot =
|description = Using Adobe Photoshop to generate textures suitable for efficient vector art rendering
|version = 1.0
|horde3dversion = 1.0 beta
|released = 2009-01-11
|author = [http://www.horde3d.org/forums/memberlist.php?mode=viewprofile&u=173 Vurlix]|
}}
|}
[[category: Technique]]

Horde3D Wiki:Community portal

2009-01-11T21:23:34Z

Vurlix: added preprocessing subsection and link to distance field vector textures

__NOEDITSECTION__{{ContentBlock|width=800|color=orange
|content= '''The community portal section of the Horde3D wiki contains community contributed articles that are not part of the official documentation. Feel free to add articles to our wiki or links to external tutorials.'''}}
{{SpacerBlock}}
{{ContentBlock|width=800
|header=Horde3D is a cross-platform graphics engine. The currently supported platform are Windows, Linux and Mac OS X.
|content={{!!}}
==Setting up the Development Environment==
*[[Horde3D Development Environment for Windows]]
*[[Horde3D Development Environment for Linux]]
*[[Horde3D Development Environment for Mac OS X]]

*[[Horde3D Development Environment from SVN]]

==Tutorials==
[[Category: Tutorials]]

Fell free to write your tutorials here, for the benefit of the whole community.

===Beginner===
#[[Tutorial - Hello World]] - In this section we will create a simple application that loads a character and animates it using a walk cycle.
#[[Tutorial - Picking]] - In this section we will demonstrate picking the node under the mouse cursor
#[[Tutorial - Simple HUD]] - How to use showOverlay to create a simple HUD.
#[[Tutorial - Setup Horde with SDL]] - How to Setup Horde with SDL.
#[[Tutorial - Setup Horde with Qt4]] - How to Setup Horde with Qt4.
#[[Tutorial - Setup Horde with Gtkmm]] - How to Setup Horde with Gtkmm

===Intermediate===
#[[Basic Pipeline Tutorial]] - Create your first custom pipeline.

===Advanced===
''to come in the future''

==Techniques==
[[Category: Techniques]]

===Shading===
#[[Shading Technique - Dot Product Detail Texturing]] - Using the dot product of vectors and signed textures for high frequency detail
#[[Shading Technique - Palette Coloring]] - Quick and dirty palette recoloration of objects
#[[Shading Technique - Gloss Mapping]] - Mask which areas of an object have specular highlights
#[[Shading Technique - Glow Mapping]] - Allow areas on an object to emit a strong glowing highlight
#[[Shading Technique - Fresnel]] - Using reflection and refraction
#[[Shading Technique - Linear Depth Buffer]] - Create a custom linear depth buffer using vertex
#[[Shading Technique - Terrain Shading]] - Height and slope based shading with triplanar texturing

===Preprocessing===
#[[Preprocessing Technique - Distance Field Vector Textures]] - Using Adobe Photoshop to generate textures suitable for efficient vector art rendering

==Content/Asset Import==
[[Category: Content Import]]
#[[Collada - 3DS Max and Maya]] - Exporting from 3D Studio Max and Maya.
#[[Collada - XSI]] - Exporting from XSI.
#[[Collada - Modo]] - Exporting from Modo.
#[[Direct Export from Blender]] - Exporting from Blender.
#[[AssetTroubleshooting|Troubleshooting]] - ''"Help, my model is not showing up!"''
}}

Main Page

2008-04-17T15:09:33Z

Vurlix: Updated download link for 1.0.0beta1-OSX SDK

__NOEDITSECTION__ __NOTOC__
{| width="800" border="0"
| colspan="2" | 

{{ContentBlock|width=806|color=orange
|content=
'''Welcome to the wiki for the open source next-generation graphics engine Horde3D.'''

This wiki collects information about how to make best use of the numerous features of Horde3D. Since it is a collaborative effort to which all community members are invited to contribute, the Horde3D team does not take any responsibility for the content or the accuracy of the content provided on these pages.
}}
{{SpacerBlock}}
{{ContentBlock|width=806|thickness=2 |color=#BFBFBF
|content=
{{Filmstrip}}
|description= [[Gallery]]: Here are a few of the [[samples]], add your own and get famous. [[Gallery|more...]]
}}
{{SpacerBlock}}
|-
|valign="top" | 
{{ContentBlock|width=500|color=#FF9900
|icon=InfoIcon.png
|iconsize=32
|halign=top
|header=Getting Started
|sub-header=Start here to learn all the H3D basics.
|content={{!!}}
* [http://www.horde3d.org/features.html Features supported by Horde3D.]
* [http://www.horde3d.org/screenshots.html Screenshots of sample applications created with Horde3D.]
* [http://www.horde3d.org/docs/_tutorial.html A small introductory tutorial which shows the API style.]
}}
{{SpacerBlock|1|1}}
{{ContentBlock|width=500|color=#FFCC33
|icon=DevIcon.png
|iconsize=32
|halign=top
|header=Using Horde
|sub-header=Practical usage of the engine.
|content={{!!}}
* [http://www.horde3d.org/docs/_usageguide.html#Concepts Introduction to basic concepts.]
* [http://www.horde3d.org/docs/_usageguide.html#Content Advice for bringing content to the engine.]
* [http://www.horde3d.org/docs/_usageguide.html#Advanced Introduction to more advanced topics.]
}}
{{SpacerBlock|1|1}}
{{ContentBlock|width=500|color=#FF9900
|icon=ResourcesIcon.png
|iconsize=32
|halign=top
|header=Resources
|sub-header=Explore the website, forums, and Community Portal.
|content={{!!}}
* [http://www.horde3d.org/ Official Horde3D Website.]
* [http://www.horde3d.org/forums/ Forums for discussions and support.]
* [http://www.horde3d.org/docs/manual.html Horde3D Manual.]
* [http://mm-werkstatt.informatik.uni-augsburg.de/Horde3DEditor/ Official Horde3D Editor]
* [[Horde3D_Wiki:Community_Portal | The Community Portal Tutorials.]]
}}
{{SpacerBlock|1|1}}
{{ContentBlock|width=500|color=#FFCC33
|icon=HighlightIcon.png
|iconsize=32
|header=Project Spotlights
|sub-header=This Month: Official Horde3D Editor.
|content={{!!}}
[[Image:H3Deditor.jpg|frame|left|H3D Editor]]
*[[Editor Features]]
*[[Editor Tutorials]]
*[[Future Enhancements]]
}}

|valign="top" | 
{{ContentBlock|width=300|header=Download Horde3D|icon=Download45.png |sub-header=Stable Release: v1.0 beta1
|center=true
|content=
'''Get [[Distribution]]'''

<html>
<a href="http://downloads.sourceforge.net/horde3d/Horde3D_SDK_1.0.0_Beta1.zip" ><img src="http://www.horde3d.org/wiki/images/6/66/WinXP80.png"></a>
<a href="http://www.mediafire.com/?csrwjww9dhe" ><img src="http://www.horde3d.org/wiki/images/6/60/MacOSX80.png"></a>
<a href="http://www.horde3d.org/downloads/Horde3D%20SDK%20%5B0.15.0%5D.zip" ><img src="http://www.horde3d.org/wiki/images/3/3d/Ubunto80.png"></a>
</html>

'''Get [[SVN Source Instructions]]'''
{{SpacerBlock|294|2|color=#FF9900}}
{{ContentBlock|width=300|width=294 |thickness=0 |content-color=#FFFFCC
|center=true
|content=
'''[[Language Bindings]]:'''

[[JavaBindings|Java]] • [[dotNETBindings|.NET]] • [[DBindings|Digitalmars D]]
}}
{{SpacerBlock|294|1|color=#FF9900}}
}}
{{SpacerBlock|1|1}}
{{ContentBlock|width=300|
|icon=DevIcon45.png
|header=[[Development | Horde3D Development]]
|sub-header=[[Current events | Current Events]]: v1.0
|content-color=#FFFFCC
|content=
These pages are only of interest to developers who are modifying Horde itself, or developing extensions.
=== [[Hardware]] ===
*[[ATI Development]] - Issues specific to ATI Cards
*[[NVidia Development]] - Issues specific to NVidia Cards
=== [[Platforms]] ===
*[[Windows Development]] - Issues specific to Microsoft Windows.
*[[Linux Development]] - Issues specific to Linux.
*[[Mac OS X Development]] - Issues specific to Mac OS X.
=== [[Extensions]] ===
*[[Terrain Extension]] - Adds Large Terrain support.
*[[Bullet Physics]] - Connects Bullet Physics Engine to Horde3D.
}}
|-
| colspan="2" | 

|}