SlideShare une entreprise Scribd logo
1  sur  13
Hatching, Stroke Styles & Pointilism
Jesse Harrison
What is hatching?
●

●

●

Hatching is an artistic technique used to
create a tonal or shading effect.
The effect is created by drawing closely
spaced parallel lines.
A common variation of hatching is to draw the
lines at an angle to each other, this is simply
called crosshatching.
Objective
●

To create a real-time hatching effect with pixel
shading and a single texture.
Creating Stroke Textures
●

●

Typically four different stroke textures are
loaded to represent overlapping strokes. Two
horizontal and two vertical.
One of the first suggestions this paper makes
is to use only one texture and rotate the
texture coordinates accordingly to obtain the
original effect of four different strokes.
Creating Stroke Textures
●

So you would start with a texture
of strokes that looks similar to
this and this will give you all you
need.

●

The four different types of strokes, our stroke
colors (stored in rgb channels) and our
intensity threshold value (stored in alpha
channel)
Threshold Scheme
●

●

●

Utilizing the threshold t of the alpha channel we
can control stroke intensity by modulating
between the stroke color and the background
color.
To do this we give each stroke an intensity
interval [start,end] and map t to this interval by
start + t/(end-start)
After computing a desired intensity we can
modulate the stroke color with the background
Varying the line style
●

For this method we do not encode stokes themselves
into a texture, but instead encode lookups into a
single-stroke textures called Stroke-Lookup Textures.

●

(a) is the r-channel with lookup in s

●

(b) is the g-channel with lookup in t

●

(c) is the b-channel which contains the threshold

●

(d) is the a-channel which is used as a stencil
Varying the line style
●

●

●

For achieving a uniform screen width of the
strokes we use mip-map levels with strokes of
the same texel size.
Generation of mip-map levels would halve the
texel width of a stroke each level. I.E. further
away strokes are smaller
For correct interpolation between mip-map
levels the stroke-lookup coordinates are
expanded from [0,1] to [-0.5,1.5]
Varying the line style
Specular Highlights
●

●

Specular Highlighting: Lighter strokes can be
drawn on the assumption that there is not a
white background.
Once a certain threshold is reached we can
draw a lighter stroke, instead of just white,
using the same dark stroke textures and
taking 1-previous_threshold to maintain stroke
priority.
Lighting Hand Drawn Illustrations
●

Hatching can be used for lighting a hand
drawn illustration and putting it into a 3D
scene using a bill boarding effect.
Stroke Colors & Pointillism
●

●

For a varying background or base color for a
stroke, we would like to draw uni-colored
strokes.
This is done by encoding offsets into the
strokes which are used for reading the base
color, so that all points of a stroke read the
same color.
Conclusion
●

●

Utilizing pixel shaders we are provided with
many stroke based rendering techniques.
The main one being the hatching scheme and
the many extensions it has.

Contenu connexe

Tendances

The Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTUREThe Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTURE
Rosa Fernández
 
Different types of lines
Different types of linesDifferent types of lines
Different types of lines
Rebecca B
 
Element of Art - Shape 2
Element of Art - Shape 2Element of Art - Shape 2
Element of Art - Shape 2
RodriguezArt
 
Intro to printmaking
Intro to printmakingIntro to printmaking
Intro to printmaking
mrsbauerart
 
Pen And Ink
Pen And InkPen And Ink
Pen And Ink
kyoung
 

Tendances (20)

The Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTUREThe Visual Elements of Art: TEXTURE
The Visual Elements of Art: TEXTURE
 
Contour line drawing
Contour line drawingContour line drawing
Contour line drawing
 
Different types of lines
Different types of linesDifferent types of lines
Different types of lines
 
Textures
TexturesTextures
Textures
 
Charcoal Drawings
Charcoal DrawingsCharcoal Drawings
Charcoal Drawings
 
Fundamentals of Drawing
Fundamentals of DrawingFundamentals of Drawing
Fundamentals of Drawing
 
Relief art texture
Relief art   textureRelief art   texture
Relief art texture
 
Elements of art- Lines
Elements of art- LinesElements of art- Lines
Elements of art- Lines
 
Line Drawing Techniques
Line Drawing TechniquesLine Drawing Techniques
Line Drawing Techniques
 
Positive And Negative Space
Positive And Negative SpacePositive And Negative Space
Positive And Negative Space
 
Element of Art - Shape 2
Element of Art - Shape 2Element of Art - Shape 2
Element of Art - Shape 2
 
Element of Art - Color
Element of Art - ColorElement of Art - Color
Element of Art - Color
 
Introduction to Drawing
Introduction to DrawingIntroduction to Drawing
Introduction to Drawing
 
Types of Drawing
Types of DrawingTypes of Drawing
Types of Drawing
 
Elements of art
Elements of artElements of art
Elements of art
 
Intro to printmaking
Intro to printmakingIntro to printmaking
Intro to printmaking
 
Pen And Ink
Pen And InkPen And Ink
Pen And Ink
 
Contrast
ContrastContrast
Contrast
 
Shape PowerPoint 2
Shape PowerPoint 2Shape PowerPoint 2
Shape PowerPoint 2
 
Still life
Still lifeStill life
Still life
 

Similaire à Hatching

study Diffusion Curves: A Vector Representation for Smooth-Shaded Images
study Diffusion Curves: A Vector Representation for Smooth-Shaded Imagesstudy Diffusion Curves: A Vector Representation for Smooth-Shaded Images
study Diffusion Curves: A Vector Representation for Smooth-Shaded Images
Chiamin Hsu
 

Similaire à Hatching (20)

attribute.pptx
attribute.pptxattribute.pptx
attribute.pptx
 
Learn Illustrator
Learn IllustratorLearn Illustrator
Learn Illustrator
 
line attributes.pptx
line attributes.pptxline attributes.pptx
line attributes.pptx
 
Introduction image features
Introduction image featuresIntroduction image features
Introduction image features
 
halftoning-160808191912.pdf
halftoning-160808191912.pdfhalftoning-160808191912.pdf
halftoning-160808191912.pdf
 
Halftoning in Computer Graphics
Halftoning  in Computer GraphicsHalftoning  in Computer Graphics
Halftoning in Computer Graphics
 
Histogram Equalization.pdf
Histogram Equalization.pdfHistogram Equalization.pdf
Histogram Equalization.pdf
 
Compututer Graphics - Color Modeling And Rendering
Compututer Graphics - Color Modeling And RenderingCompututer Graphics - Color Modeling And Rendering
Compututer Graphics - Color Modeling And Rendering
 
Texturing
TexturingTexturing
Texturing
 
Displays and color system in computer graphics(Computer graphics tutorials)
Displays and color system in computer graphics(Computer graphics tutorials)Displays and color system in computer graphics(Computer graphics tutorials)
Displays and color system in computer graphics(Computer graphics tutorials)
 
study Diffusion Curves: A Vector Representation for Smooth-Shaded Images
study Diffusion Curves: A Vector Representation for Smooth-Shaded Imagesstudy Diffusion Curves: A Vector Representation for Smooth-Shaded Images
study Diffusion Curves: A Vector Representation for Smooth-Shaded Images
 
Graph coloring problem(DAA).pptx
Graph coloring problem(DAA).pptxGraph coloring problem(DAA).pptx
Graph coloring problem(DAA).pptx
 
SESSION 1.pptx
SESSION 1.pptxSESSION 1.pptx
SESSION 1.pptx
 
Chap5 imange enhancemet
Chap5 imange enhancemetChap5 imange enhancemet
Chap5 imange enhancemet
 
project presentation-90-MCS-200003.pptx
project presentation-90-MCS-200003.pptxproject presentation-90-MCS-200003.pptx
project presentation-90-MCS-200003.pptx
 
A relational approach to color
A relational approach to colorA relational approach to color
A relational approach to color
 
Color models
Color modelsColor models
Color models
 
ModuleII.ppt
ModuleII.pptModuleII.ppt
ModuleII.ppt
 
ModuleII.ppt
ModuleII.pptModuleII.ppt
ModuleII.ppt
 
ModuleII.ppt
ModuleII.pptModuleII.ppt
ModuleII.ppt
 

Dernier

Difference Between Skeletal Smooth and Cardiac Muscles
Difference Between Skeletal Smooth and Cardiac MusclesDifference Between Skeletal Smooth and Cardiac Muscles
Difference Between Skeletal Smooth and Cardiac Muscles
MedicoseAcademics
 
Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...
Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...
Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...
Cara Menggugurkan Kandungan 087776558899
 
👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...
👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...
👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...
rajnisinghkjn
 
❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...
❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...
❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...
Rashmi Entertainment
 
Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...
Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...
Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...
chanderprakash5506
 

Dernier (20)

7 steps How to prevent Thalassemia : Dr Sharda Jain & Vandana Gupta
7 steps How to prevent Thalassemia : Dr Sharda Jain & Vandana Gupta7 steps How to prevent Thalassemia : Dr Sharda Jain & Vandana Gupta
7 steps How to prevent Thalassemia : Dr Sharda Jain & Vandana Gupta
 
Call Girls Rishikesh Just Call 9667172968 Top Class Call Girl Service Available
Call Girls Rishikesh Just Call 9667172968 Top Class Call Girl Service AvailableCall Girls Rishikesh Just Call 9667172968 Top Class Call Girl Service Available
Call Girls Rishikesh Just Call 9667172968 Top Class Call Girl Service Available
 
Difference Between Skeletal Smooth and Cardiac Muscles
Difference Between Skeletal Smooth and Cardiac MusclesDifference Between Skeletal Smooth and Cardiac Muscles
Difference Between Skeletal Smooth and Cardiac Muscles
 
Lucknow Call Girls Just Call 👉👉8630512678 Top Class Call Girl Service Available
Lucknow Call Girls Just Call 👉👉8630512678 Top Class Call Girl Service AvailableLucknow Call Girls Just Call 👉👉8630512678 Top Class Call Girl Service Available
Lucknow Call Girls Just Call 👉👉8630512678 Top Class Call Girl Service Available
 
(RIYA)🎄Airhostess Call Girl Jaipur Call Now 8445551418 Premium Collection Of ...
(RIYA)🎄Airhostess Call Girl Jaipur Call Now 8445551418 Premium Collection Of ...(RIYA)🎄Airhostess Call Girl Jaipur Call Now 8445551418 Premium Collection Of ...
(RIYA)🎄Airhostess Call Girl Jaipur Call Now 8445551418 Premium Collection Of ...
 
Call Girls Wayanad Just Call 8250077686 Top Class Call Girl Service Available
Call Girls Wayanad Just Call 8250077686 Top Class Call Girl Service AvailableCall Girls Wayanad Just Call 8250077686 Top Class Call Girl Service Available
Call Girls Wayanad Just Call 8250077686 Top Class Call Girl Service Available
 
Call 8250092165 Patna Call Girls ₹4.5k Cash Payment With Room Delivery
Call 8250092165 Patna Call Girls ₹4.5k Cash Payment With Room DeliveryCall 8250092165 Patna Call Girls ₹4.5k Cash Payment With Room Delivery
Call 8250092165 Patna Call Girls ₹4.5k Cash Payment With Room Delivery
 
Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...
Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...
Cara Menggugurkan Kandungan Dengan Cepat Selesai Dalam 24 Jam Secara Alami Bu...
 
Cardiac Output, Venous Return, and Their Regulation
Cardiac Output, Venous Return, and Their RegulationCardiac Output, Venous Return, and Their Regulation
Cardiac Output, Venous Return, and Their Regulation
 
Call Girls Service Jaipur {9521753030 } ❤️VVIP BHAWNA Call Girl in Jaipur Raj...
Call Girls Service Jaipur {9521753030 } ❤️VVIP BHAWNA Call Girl in Jaipur Raj...Call Girls Service Jaipur {9521753030 } ❤️VVIP BHAWNA Call Girl in Jaipur Raj...
Call Girls Service Jaipur {9521753030 } ❤️VVIP BHAWNA Call Girl in Jaipur Raj...
 
👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...
👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...
👉 Chennai Sexy Aunty’s WhatsApp Number 👉📞 7427069034 👉📞 Just📲 Call Ruhi Colle...
 
💞 Safe And Secure Call Girls Coimbatore🧿 6378878445 🧿 High Class Coimbatore C...
💞 Safe And Secure Call Girls Coimbatore🧿 6378878445 🧿 High Class Coimbatore C...💞 Safe And Secure Call Girls Coimbatore🧿 6378878445 🧿 High Class Coimbatore C...
💞 Safe And Secure Call Girls Coimbatore🧿 6378878445 🧿 High Class Coimbatore C...
 
❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...
❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...
❤️ Chandigarh Call Girls☎️98151-579OO☎️ Call Girl service in Chandigarh ☎️ Ch...
 
Chennai ❣️ Call Girl 6378878445 Call Girls in Chennai Escort service book now
Chennai ❣️ Call Girl 6378878445 Call Girls in Chennai Escort service book nowChennai ❣️ Call Girl 6378878445 Call Girls in Chennai Escort service book now
Chennai ❣️ Call Girl 6378878445 Call Girls in Chennai Escort service book now
 
Call Girls Bangalore - 450+ Call Girl Cash Payment 💯Call Us 🔝 6378878445 🔝 💃 ...
Call Girls Bangalore - 450+ Call Girl Cash Payment 💯Call Us 🔝 6378878445 🔝 💃 ...Call Girls Bangalore - 450+ Call Girl Cash Payment 💯Call Us 🔝 6378878445 🔝 💃 ...
Call Girls Bangalore - 450+ Call Girl Cash Payment 💯Call Us 🔝 6378878445 🔝 💃 ...
 
Call Girls Mussoorie Just Call 8854095900 Top Class Call Girl Service Available
Call Girls Mussoorie Just Call 8854095900 Top Class Call Girl Service AvailableCall Girls Mussoorie Just Call 8854095900 Top Class Call Girl Service Available
Call Girls Mussoorie Just Call 8854095900 Top Class Call Girl Service Available
 
Circulatory Shock, types and stages, compensatory mechanisms
Circulatory Shock, types and stages, compensatory mechanismsCirculatory Shock, types and stages, compensatory mechanisms
Circulatory Shock, types and stages, compensatory mechanisms
 
Call Girls in Lucknow Just Call 👉👉8630512678 Top Class Call Girl Service Avai...
Call Girls in Lucknow Just Call 👉👉8630512678 Top Class Call Girl Service Avai...Call Girls in Lucknow Just Call 👉👉8630512678 Top Class Call Girl Service Avai...
Call Girls in Lucknow Just Call 👉👉8630512678 Top Class Call Girl Service Avai...
 
Call girls Service Phullen / 9332606886 Genuine Call girls with real Photos a...
Call girls Service Phullen / 9332606886 Genuine Call girls with real Photos a...Call girls Service Phullen / 9332606886 Genuine Call girls with real Photos a...
Call girls Service Phullen / 9332606886 Genuine Call girls with real Photos a...
 
Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...
Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...
Russian Call Girls In Pune 👉 Just CALL ME: 9352988975 ✅❤️💯low cost unlimited ...
 

Hatching

  • 1. Hatching, Stroke Styles & Pointilism Jesse Harrison
  • 2. What is hatching? ● ● ● Hatching is an artistic technique used to create a tonal or shading effect. The effect is created by drawing closely spaced parallel lines. A common variation of hatching is to draw the lines at an angle to each other, this is simply called crosshatching.
  • 3. Objective ● To create a real-time hatching effect with pixel shading and a single texture.
  • 4. Creating Stroke Textures ● ● Typically four different stroke textures are loaded to represent overlapping strokes. Two horizontal and two vertical. One of the first suggestions this paper makes is to use only one texture and rotate the texture coordinates accordingly to obtain the original effect of four different strokes.
  • 5. Creating Stroke Textures ● So you would start with a texture of strokes that looks similar to this and this will give you all you need. ● The four different types of strokes, our stroke colors (stored in rgb channels) and our intensity threshold value (stored in alpha channel)
  • 6. Threshold Scheme ● ● ● Utilizing the threshold t of the alpha channel we can control stroke intensity by modulating between the stroke color and the background color. To do this we give each stroke an intensity interval [start,end] and map t to this interval by start + t/(end-start) After computing a desired intensity we can modulate the stroke color with the background
  • 7. Varying the line style ● For this method we do not encode stokes themselves into a texture, but instead encode lookups into a single-stroke textures called Stroke-Lookup Textures. ● (a) is the r-channel with lookup in s ● (b) is the g-channel with lookup in t ● (c) is the b-channel which contains the threshold ● (d) is the a-channel which is used as a stencil
  • 8. Varying the line style ● ● ● For achieving a uniform screen width of the strokes we use mip-map levels with strokes of the same texel size. Generation of mip-map levels would halve the texel width of a stroke each level. I.E. further away strokes are smaller For correct interpolation between mip-map levels the stroke-lookup coordinates are expanded from [0,1] to [-0.5,1.5]
  • 10. Specular Highlights ● ● Specular Highlighting: Lighter strokes can be drawn on the assumption that there is not a white background. Once a certain threshold is reached we can draw a lighter stroke, instead of just white, using the same dark stroke textures and taking 1-previous_threshold to maintain stroke priority.
  • 11. Lighting Hand Drawn Illustrations ● Hatching can be used for lighting a hand drawn illustration and putting it into a 3D scene using a bill boarding effect.
  • 12. Stroke Colors & Pointillism ● ● For a varying background or base color for a stroke, we would like to draw uni-colored strokes. This is done by encoding offsets into the strokes which are used for reading the base color, so that all points of a stroke read the same color.
  • 13. Conclusion ● ● Utilizing pixel shaders we are provided with many stroke based rendering techniques. The main one being the hatching scheme and the many extensions it has.

Notes de l'éditeur

  1. {"1":"<number>\n"}