SlideShare ist ein Scribd-Unternehmen logo
1 von 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.

Weitere ähnliche Inhalte

Was ist angesagt?

Different types of lines
Different types of linesDifferent types of lines
Different types of lines
Rebecca B
 
Intro to printmaking
Intro to printmakingIntro to printmaking
Intro to printmaking
mrsbauerart
 
Element of Art - Shape 2
Element of Art - Shape 2Element of Art - Shape 2
Element of Art - Shape 2
RodriguezArt
 
Line, contour line, and observation drawing
Line, contour line, and observation drawingLine, contour line, and observation drawing
Line, contour line, and observation drawing
Amanda Woodard
 

Was ist angesagt? (20)

Element of Art - Line
Element of Art - LineElement of Art - Line
Element of Art - Line
 
Elements of Art: LINE
Elements of Art: LINEElements of Art: LINE
Elements of Art: LINE
 
Element of art - texture
Element of art - textureElement of art - texture
Element of art - texture
 
Watercolor
WatercolorWatercolor
Watercolor
 
Different types of lines
Different types of linesDifferent types of lines
Different types of lines
 
Line , shape form , space & TEXTURE
Line , shape form , space & TEXTURE Line , shape form , space & TEXTURE
Line , shape form , space & TEXTURE
 
Intro to printmaking
Intro to printmakingIntro to printmaking
Intro to printmaking
 
Elements of art space
Elements of art   spaceElements of art   space
Elements of art space
 
Some basic ideas about texture
Some basic ideas about textureSome basic ideas about texture
Some basic ideas about texture
 
Element of Art - Shape 2
Element of Art - Shape 2Element of Art - Shape 2
Element of Art - Shape 2
 
Line, contour line, and observation drawing
Line, contour line, and observation drawingLine, contour line, and observation drawing
Line, contour line, and observation drawing
 
Sketching Basics- Part 1
Sketching Basics- Part 1Sketching Basics- Part 1
Sketching Basics- Part 1
 
Ach 111 Intro To Sketching Techniques
Ach 111 Intro To Sketching TechniquesAch 111 Intro To Sketching Techniques
Ach 111 Intro To Sketching Techniques
 
DRAWING MEDIA.pptx
DRAWING MEDIA.pptxDRAWING MEDIA.pptx
DRAWING MEDIA.pptx
 
Proportion in Art
Proportion in ArtProportion in Art
Proportion in Art
 
Printmaking
PrintmakingPrintmaking
Printmaking
 
Tessellations
TessellationsTessellations
Tessellations
 
Rhythm
RhythmRhythm
Rhythm
 
Repetition
RepetitionRepetition
Repetition
 
FOD UNIT 4 shading technique.pptx
FOD UNIT 4 shading technique.pptxFOD UNIT 4 shading technique.pptx
FOD UNIT 4 shading technique.pptx
 

Ähnlich wie 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
 

Ähnlich wie 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 in Computer Graphics
Halftoning  in Computer GraphicsHalftoning  in Computer Graphics
Halftoning in Computer Graphics
 
halftoning-160808191912.pdf
halftoning-160808191912.pdfhalftoning-160808191912.pdf
halftoning-160808191912.pdf
 
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
 

Kürzlich hochgeladen

Cardiac Impulse: Rhythmical Excitation and Conduction in the Heart
Cardiac Impulse: Rhythmical Excitation and Conduction in the HeartCardiac Impulse: Rhythmical Excitation and Conduction in the Heart
Cardiac Impulse: Rhythmical Excitation and Conduction in the Heart
MedicoseAcademics
 

Kürzlich hochgeladen (20)

hypo and hyper thyroidism final lecture.pptx
hypo and hyper thyroidism  final lecture.pptxhypo and hyper thyroidism  final lecture.pptx
hypo and hyper thyroidism final lecture.pptx
 
Hemodialysis: Chapter 2, Extracorporeal Blood Circuit - Dr.Gawad
Hemodialysis: Chapter 2, Extracorporeal Blood Circuit - Dr.GawadHemodialysis: Chapter 2, Extracorporeal Blood Circuit - Dr.Gawad
Hemodialysis: Chapter 2, Extracorporeal Blood Circuit - Dr.Gawad
 
The Orbit & its contents by Dr. Rabia I. Gandapore.pptx
The Orbit & its contents by Dr. Rabia I. Gandapore.pptxThe Orbit & its contents by Dr. Rabia I. Gandapore.pptx
The Orbit & its contents by Dr. Rabia I. Gandapore.pptx
 
Book Trailer: PGMEE in a Nutshell (CEE MD/MS PG Entrance Examination)
Book Trailer: PGMEE in a Nutshell (CEE MD/MS PG Entrance Examination)Book Trailer: PGMEE in a Nutshell (CEE MD/MS PG Entrance Examination)
Book Trailer: PGMEE in a Nutshell (CEE MD/MS PG Entrance Examination)
 
Antiplatelets in IHD, Dose Duration, DAPT vs SAPT
Antiplatelets in IHD, Dose Duration, DAPT vs SAPTAntiplatelets in IHD, Dose Duration, DAPT vs SAPT
Antiplatelets in IHD, Dose Duration, DAPT vs SAPT
 
Video capsule endoscopy (VCE ) in children
Video capsule endoscopy (VCE ) in childrenVideo capsule endoscopy (VCE ) in children
Video capsule endoscopy (VCE ) in children
 
Compare home pulse pressure components collected directly from home
Compare home pulse pressure components collected directly from homeCompare home pulse pressure components collected directly from home
Compare home pulse pressure components collected directly from home
 
linearity concept of significance, standard deviation, chi square test, stude...
linearity concept of significance, standard deviation, chi square test, stude...linearity concept of significance, standard deviation, chi square test, stude...
linearity concept of significance, standard deviation, chi square test, stude...
 
CURRENT HEALTH PROBLEMS AND ITS SOLUTION BY AYURVEDA.pptx
CURRENT HEALTH PROBLEMS AND ITS SOLUTION BY AYURVEDA.pptxCURRENT HEALTH PROBLEMS AND ITS SOLUTION BY AYURVEDA.pptx
CURRENT HEALTH PROBLEMS AND ITS SOLUTION BY AYURVEDA.pptx
 
Multiple sclerosis diet.230524.ppt3.pptx
Multiple sclerosis diet.230524.ppt3.pptxMultiple sclerosis diet.230524.ppt3.pptx
Multiple sclerosis diet.230524.ppt3.pptx
 
Factors Affecting child behavior in Pediatric Dentistry
Factors Affecting child behavior in Pediatric DentistryFactors Affecting child behavior in Pediatric Dentistry
Factors Affecting child behavior in Pediatric Dentistry
 
NCLEX RN REVIEW EXAM CONTENT BLUE BOOK PDF
NCLEX RN REVIEW EXAM CONTENT BLUE BOOK PDFNCLEX RN REVIEW EXAM CONTENT BLUE BOOK PDF
NCLEX RN REVIEW EXAM CONTENT BLUE BOOK PDF
 
Vaccines: A Powerful and Cost-Effective Tool Protecting Americans Against Dis...
Vaccines: A Powerful and Cost-Effective Tool Protecting Americans Against Dis...Vaccines: A Powerful and Cost-Effective Tool Protecting Americans Against Dis...
Vaccines: A Powerful and Cost-Effective Tool Protecting Americans Against Dis...
 
SURGICAL ANATOMY OF ORAL IMPLANTOLOGY.pptx
SURGICAL ANATOMY OF ORAL IMPLANTOLOGY.pptxSURGICAL ANATOMY OF ORAL IMPLANTOLOGY.pptx
SURGICAL ANATOMY OF ORAL IMPLANTOLOGY.pptx
 
Impact of cancers therapies on the loss in cardiac function, myocardial fffic...
Impact of cancers therapies on the loss in cardiac function, myocardial fffic...Impact of cancers therapies on the loss in cardiac function, myocardial fffic...
Impact of cancers therapies on the loss in cardiac function, myocardial fffic...
 
DECIPHERING COMMON ECG FINDINGS IN ED.pptx
DECIPHERING COMMON ECG FINDINGS IN ED.pptxDECIPHERING COMMON ECG FINDINGS IN ED.pptx
DECIPHERING COMMON ECG FINDINGS IN ED.pptx
 
Integrated Neuromuscular Inhibition Technique (INIT)
Integrated Neuromuscular Inhibition Technique (INIT)Integrated Neuromuscular Inhibition Technique (INIT)
Integrated Neuromuscular Inhibition Technique (INIT)
 
Cardiac Impulse: Rhythmical Excitation and Conduction in the Heart
Cardiac Impulse: Rhythmical Excitation and Conduction in the HeartCardiac Impulse: Rhythmical Excitation and Conduction in the Heart
Cardiac Impulse: Rhythmical Excitation and Conduction in the Heart
 
Cas 28578-16-7 PMK ethyl glycidate ( new PMK powder) best suppler
Cas 28578-16-7 PMK ethyl glycidate ( new PMK powder) best supplerCas 28578-16-7 PMK ethyl glycidate ( new PMK powder) best suppler
Cas 28578-16-7 PMK ethyl glycidate ( new PMK powder) best suppler
 
World Hypertension Day 17th may 2024 ppt
World Hypertension Day 17th may 2024 pptWorld Hypertension Day 17th may 2024 ppt
World Hypertension Day 17th may 2024 ppt
 

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.

Hinweis der Redaktion

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