issue115:inkscape
Différences
Ci-dessous, les différences entre deux révisions de la page.
Les deux révisions précédentesRévision précédenteProchaine révision | Révision précédenteDernière révisionLes deux révisions suivantes | ||
issue115:inkscape [2016/11/29 09:14] – d52fr | issue115:inkscape [2016/12/02 18:29] – auntiee | ||
---|---|---|---|
Ligne 1: | Ligne 1: | ||
- | This month we'll be looking at the last of the filter primitives available in Inkscape 0.48, Diffuse Lighting and Specular Lighting. These are used to simulate the effect of lights shining on your objects, and constitute two thirds of the Phong reflection model. The third part, Ambient Lighting, refers to light that's present everywhere in an image rather than coming from a specific light source. There' | + | **This month we'll be looking at the last of the filter primitives available in Inkscape 0.48, Diffuse Lighting and Specular Lighting. These are used to simulate the effect of lights shining on your objects, and constitute two thirds of the Phong reflection model. The third part, Ambient Lighting, refers to light that's present everywhere in an image rather than coming from a specific light source. There' |
Diffuse Light refers to the general light and shadow on an object that doesn' | Diffuse Light refers to the general light and shadow on an object that doesn' | ||
- | To begin, create an object or group to apply the filter to, and then add a Diffuse Lighting primitive in the usual way. There are a few parameters to modify, but mostly it's a case of moving sliders by trial-and-error in order to achieve the result you want. | + | To begin, create an object or group to apply the filter to, and then add a Diffuse Lighting primitive in the usual way. There are a few parameters to modify, but mostly it's a case of moving sliders by trial-and-error in order to achieve the result you want.** |
- | The first parameter to choose is the color of your light. This has a huge effect on the output of the filter, as the lighting effect completely replaces the original color of your objects, rather than mixing with the underlying hues. In the example that follows, all the text objects are teal (a blue-green color), but the color used in the filters is yellow. Notice that no teal appears in the output images. | + | Ce mois-ci, nous examinerons les dernières primitives de filtrage disponibles dans Inkscape 0.48, Lumière diffuse et Lumière spéculaire. Elles sont utilisées pour simuler l' |
+ | |||
+ | Lumière diffuse fait référence à l' | ||
+ | |||
+ | Pour commencer, créez un objet ou un groupe auquel appliquer le filtre et ajoutez ensuite la primitive Lumière diffuse de la façon habituelle. Il y a quelques paramètres modifiables, | ||
+ | |||
+ | **The first parameter to choose is the color of your light. This has a huge effect on the output of the filter, as the lighting effect completely replaces the original color of your objects, rather than mixing with the underlying hues. In the example that follows, all the text objects are teal (a blue-green color), but the color used in the filters is yellow. Notice that no teal appears in the output images. | ||
In practice, it's only the alpha channel of the input image that's used by this primitive – so it doesn' | In practice, it's only the alpha channel of the input image that's used by this primitive – so it doesn' | ||
- | The Kernel Unit Length parameter can be largely ignored. It's not used by Inkscape, but may have an effect on other SVG viewers, where it's used to define the size of the pixel grid used for the filter calculations. I usually just leave it at zero. | + | The Kernel Unit Length parameter can be largely ignored. It's not used by Inkscape, but may have an effect on other SVG viewers, where it's used to define the size of the pixel grid used for the filter calculations. I usually just leave it at zero.** |
- | Finally, it's time to choose the type of light source: Distant, Point, or Spot. The first indicates | + | Le premier paramètre à choisir est la couleur de la lumière. Celle-ci |
- | Specifying two polar values like this defines a bearing in three-dimensional space. If you ever watch an episode of Star Trek where a crew member states their course as “249 mark 38,” this is what they're doing – just stating an azimuth and elevation to describe the direction the ship should head in. It always amazes me that they're able to judge those values to the nearest degree, but then I haven't had the benefit of a Starfleet Academy stellar cartography course! | + | En pratique, seul le canal alpha de l'image d'entrée est utilisé par cette primitive ; aussi, le fait d' |
- | With two polar values able to define a bearing, it only takes a third parameter, distance, to specify a particular point in space. When selecting the Point Light option, you might expect to see the same two sliders, joined by a third. But the SVG working group decided that defining a specific point in 3D should be done using Cartesian coordinates, so instead you have three anonymous fields with a single “Location” label, representing the location of the point light using x, y and z coordinates. There' | + | Le paramètre Unité de longueur du kernel peut être largement ignoré. Il n'est pas utilisé par Inkscape, mais peut avoir de l' |
- | Whereas | + | **Finally, it's time to choose |
- | The Spot Light option is even more precise in its effect. This requires two sets of coordinates – one to specify the location of the light, and the other to define the direction it's pointing in (which is actually achieved by specifying the point in space it's aiming at). The light is projected in a cone from the source to the target, with an additional two sliders to set the characteristics of that cone: the Specular Exponent sets how focused the light is, whilst the Cone Angle defines the shape of the cone. The cone has a hard edge to it; any points outside it will not be illuminated at all, so you will need additional filter steps if you want a softer edge. | + | Specifying two polar values like this defines a bearing in three-dimensional space. If you ever watch an episode of Star Trek where a crew member states their course as “249 mark 38,” this is what they' |
+ | |||
+ | Enfin, c'est le moment de choisir le type de source lumineuse : distante, ponctuelle ou spot. La première indique une source de lumière qui est à une distance infinie de l' | ||
+ | |||
+ | La spécification de deux valeurs angulaires comme cela définit une position sphérique dans l' | ||
+ | |||
+ | **With two polar values able to define a bearing, it only takes a third parameter, distance, to specify a particular point in space. When selecting the Point Light option, you might expect to see the same two sliders, joined by a third. But the SVG working group decided that defining a specific point in 3D should be done using Cartesian coordinates, | ||
+ | |||
+ | Whereas the Distant Light, at its infinite distance from the scene, projects an even illumination, | ||
+ | |||
+ | Avec deux valeurs polaires capables de définir une position sphérique, il suffit d'un troisième paramètre, la distance, pour spécifier un point dans l' | ||
+ | |||
+ | Alors que la Lumière distante, à une distance infinie de la scène, projette une illumination uniforme, la Lumière ponctuelle est bien plus nuancée. Elle illumine plus les zones près de la source lumineuse que celles à distance, entraînant des nuances dans la couleur finale. | ||
+ | |||
+ | **The Spot Light option is even more precise in its effect. This requires two sets of coordinates – one to specify the location of the light, and the other to define the direction it's pointing in (which is actually achieved by specifying the point in space it's aiming at). The light is projected in a cone from the source to the target, with an additional two sliders to set the characteristics of that cone: the Specular Exponent sets how focused the light is, whilst the Cone Angle defines the shape of the cone. The cone has a hard edge to it; any points outside it will not be illuminated at all, so you will need additional filter steps if you want a softer edge. | ||
This example shows the three types of light in use on some text objects, all of which are actually blue as their base color! | This example shows the three types of light in use on some text objects, all of which are actually blue as their base color! | ||
+ | You'll notice how “flat” all of these are. Because the bump map is created from the alpha channel of the input image, and our input image has alpha values of only 0 and 255, there’s no scope for gentle transitions in height. If you want a softer edge to your lighting you'll need to introduce some variety in the alpha channel. The easiest way to do this is by using a Gaussian Blur primitive to the input image.** | ||
- | You'll notice how “flat” all of these are. Because the bump map is created from the alpha channel of the input image, and our input image has alpha values of only 0 and 255, there’s no scope for gentle transitions in height. If you want a softer edge to your lighting you'll need to introduce some variety in the alpha channel. The easiest way to do this is by using a Gaussian Blur primitive to the input image. | + | L'option Lumière spot est encore plus précise dans son effet. Elle requiert deux jeux de coordonnées : l'un pour spécifier la position de la lumière et l' |
- | Just adding a blur will tend to spread the edge of your text outwards as well as inwards (second image in the next example). For a more pronounced effect, it's often worth using a Morphology filter to erode the input image before you blur it. By thinning your objects first, the full extent of the blur can be kept inside the boundaries of the original shapes (third image). If you then add a Composite filter, set to “In”, to the output of your lighting primitive, you can clip the result to give you something more like the rounded text you were probably looking for (fourth image). | + | Cet exemple montre l' |
+ | |||
+ | Vous noterez comme ils ont tous l'air « plats ». Parce que l' | ||
+ | |||
+ | **Just adding a blur will tend to spread the edge of your text outwards as well as inwards (second image in the next example). For a more pronounced effect, it's often worth using a Morphology filter to erode the input image before you blur it. By thinning your objects first, the full extent of the blur can be kept inside the boundaries of the original shapes (third image). If you then add a Composite filter, set to “In”, to the output of your lighting primitive, you can clip the result to give you something more like the rounded text you were probably looking for (fourth image). | ||
Still we're left with that yellow color from the lighting filter. This is where the “Arithmetic” option of the Composite filter comes in (re-read part 50 if you need a refresher on this primitive). The output from the Diffuse Light filter is intended to be multiplied with the source image in order to overlay the lighting effect onto the underlying objects, but rather than providing a nice, obvious shortcut to this operation, the Inkscape UI just exposes the parameters of the underlying SVG model. For each channel of each pixel, the Arithmetic operator performs the following calculation: | Still we're left with that yellow color from the lighting filter. This is where the “Arithmetic” option of the Composite filter comes in (re-read part 50 if you need a refresher on this primitive). The output from the Diffuse Light filter is intended to be multiplied with the source image in order to overlay the lighting effect onto the underlying objects, but rather than providing a nice, obvious shortcut to this operation, the Inkscape UI just exposes the parameters of the underlying SVG model. For each channel of each pixel, the Arithmetic operator performs the following calculation: | ||
Ligne 34: | Ligne 59: | ||
Where K1-4 are constants set in the UI, and i1 and i2 represent the values from a pair of input images. By setting K1 to 1.0 and all the other constants to 0, this equation simplifies down to: | Where K1-4 are constants set in the UI, and i1 and i2 represent the values from a pair of input images. By setting K1 to 1.0 and all the other constants to 0, this equation simplifies down to: | ||
- | result = i1×i2 | + | result = i1×i2** |
- | In other words, a simple multiplication of input values, which is exactly what we want. Changing the “In” operator in the previous filter chain to “Arithmetic”, | + | Le simple ajout d'un flou tendra à disperser le bord de votre texte à l' |
+ | |||
+ | Et malgré tout, nous conservons la couleur jaune venant du filtre Éclairage. C'est ici que l' | ||
+ | |||
+ | résultat = (K1×i1×i2) + (K2×i1) + (K3×i2) + K4 | ||
+ | |||
+ | où K1-4 sont les constantes réglées dans l' | ||
+ | |||
+ | résultat = i1xi2 | ||
+ | |||
+ | |||
+ | **In other words, a simple multiplication of input values, which is exactly what we want. Changing the “In” operator in the previous filter chain to “Arithmetic”, | ||
Now we have an illuminated object whose base color has an effect on the output. This is obviously much more flexible than the simple “In” operator, which would have us changing the lighting color in the filter itself every time we want to alter the result. If you're worried about losing the “clipping” effect of the “In” operator, don't be: the multiplication operator also applies to the alpha channel, so all those areas in the source image with alpha=0 will result in transparent pixels in the output as well. | Now we have an illuminated object whose base color has an effect on the output. This is obviously much more flexible than the simple “In” operator, which would have us changing the lighting color in the filter itself every time we want to alter the result. If you're worried about losing the “clipping” effect of the “In” operator, don't be: the multiplication operator also applies to the alpha channel, so all those areas in the source image with alpha=0 will result in transparent pixels in the output as well. | ||
- | Moving on to the Specular Light filter, things look pretty similar in the filter UI. There' | + | Moving on to the Specular Light filter, things look pretty similar in the filter UI. There' |
- | Unlike Diffuse Light, this filter results in an image with mixed alpha values. Watch out for this, as seemingly bright reflections might actually just be a white background showing through! In the following image you can see that effect quite clearly on the first and second examples, where bright white “reflections” to the left of the filtered text are exposed as holes in the alpha channel once the yellow background is added behind them. Note that I've used a red Point Light in these examples, but still with teal text as the original object. | + | Autrement dit, une simple multiplication des valeurs d' |
+ | |||
+ | Maintenant, nous avons un objet illuminé dont la couleur de base a un effet sur la sortie. C'est évidemment beaucoup plus souple qu'un simple opérateur « In », ce qui nous permettrait de changer la lumière d' | ||
+ | |||
+ | En passant au filtre Lumière spéculaire, | ||
+ | |||
+ | **Unlike Diffuse Light, this filter results in an image with mixed alpha values. Watch out for this, as seemingly bright reflections might actually just be a white background showing through! In the following image you can see that effect quite clearly on the first and second examples, where bright white “reflections” to the left of the filtered text are exposed as holes in the alpha channel once the yellow background is added behind them. Note that I've used a red Point Light in these examples, but still with teal text as the original object. | ||
The four images above show the effect of the Specular Light filter on the plain text, then on an eroded version of the same. I didn't add a Gaussian Blur this time, as I wanted the specular reflections to be sharp and clear. Cranking up the Exponent value in the third image gets close to an output that just shows the highlights, which can then be added back to the original source image again using another Composite Primitive (fourth image). | The four images above show the effect of the Specular Light filter on the plain text, then on an eroded version of the same. I didn't add a Gaussian Blur this time, as I wanted the specular reflections to be sharp and clear. Cranking up the Exponent value in the third image gets close to an output that just shows the highlights, which can then be added back to the original source image again using another Composite Primitive (fourth image). | ||
Ligne 48: | Ligne 90: | ||
This time the “Arithmetic” mode is used again, but with values of 0, 1, 1, 0 – which has the effect of reducing the equation down to: | This time the “Arithmetic” mode is used again, but with values of 0, 1, 1, 0 – which has the effect of reducing the equation down to: | ||
- | result = i1+i2 | + | result = i1+i2** |
- | This primitive therefore adds the reflections to the original image, which is the recommended approach from the SVG specification. Note, however, that a little background opacity has also sneaked through, so you might want to apply another Composite Filter, set to “In”, to ensure that the result is clipped to the shape of your original objects. | + | Contrairement à la Lumière diffuse, ce filtre produit une image avec des valeurs alpha variées. Regardez-le bien, car des réflexions semblant brillantes pourraient n' |
+ | |||
+ | Les quatre images ci-dessus montrent l' | ||
+ | |||
+ | Cette fois, le mode « Arithmétique » est utilisé à nouveau, mais les valeurs sont 0, 1, 1, 0 – ce qui a pour effet de réduire l' | ||
+ | |||
+ | |||
+ | résultat = i1+i2 | ||
+ | |||
+ | **This primitive therefore adds the reflections to the original image, which is the recommended approach from the SVG specification. Note, however, that a little background opacity has also sneaked through, so you might want to apply another Composite Filter, set to “In”, to ensure that the result is clipped to the shape of your original objects. | ||
Finally it's time to combine both lighting filters to produce a fully lit object, with both diffuse and specular light. Once again, the original text is teal, so the yellow diffuse light gives it a green appearance – but you can also see the glinting highlights from the red light source of the specular filter making an appearance. | Finally it's time to combine both lighting filters to produce a fully lit object, with both diffuse and specular light. Once again, the original text is teal, so the yellow diffuse light gives it a green appearance – but you can also see the glinting highlights from the red light source of the specular filter making an appearance. | ||
- | The full filter chain for this effect isn't too complex if you take it one step at a time. First the Morphology primitive erodes the text of the Source Graphic a little, with the output from that going straight into the Specular Lighting primitive, to give those sharp, red highlights. The Morphology output also goes to a Gaussian Blur to soften the image before it's used in the Diffuse Lighting primitive. | + | The full filter chain for this effect isn't too complex if you take it one step at a time. First the Morphology primitive erodes the text of the Source Graphic a little, with the output from that going straight into the Specular Lighting primitive, to give those sharp, red highlights. The Morphology output also goes to a Gaussian Blur to soften the image before it's used in the Diffuse Lighting primitive.** |
+ | |||
+ | Par conséquent, | ||
+ | |||
+ | Enfin, il est temps de combiner les deux filtres d' | ||
+ | |||
+ | La chaîne de filtrage complète pour cet effet n'est pas trop compliquée si vous la faites étape par étape. En premier, la primitive Morphologie érode un peu le texte de l' | ||
+ | |||
+ | **From there, it's just a matter of combining everything together: the first Composite filter (“Arithmetic” mode: 1, 0, 0, 0) multiplies the Source Graphic with the output from the Diffuse Lighting. The second Composite (“Arithmetic” mode: 0, 1, 1, 0) adds in the Specular Lighting highlights. Although the result is almost perfect, there was a slightly visible background, albeit with a low alpha value. A third Composite filter (“In” mode) simply tidies everything up a bit. | ||
+ | |||
+ | Although they' | ||
- | From there, it's just a matter of combining everything together: the first Composite | + | De là, il s'agit juste de tout combiner ensemble |
- | Although they' | + | Bien que ce ne soit pas un vrai rayonnement ou un modelage |
issue115/inkscape.txt · Dernière modification : 2016/12/03 10:09 de auntiee