You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@royale.apache.org by Yishay Weiss <yi...@hotmail.com> on 2019/01/08 11:21:37 UTC

BevelFilter

I’m trying to implement BevelFilter [1] in SVG, but I can’t find a good source on how to do that. There are some basic examples [2]  but I haven’t found anything that maps all the flash [1] (or Photoshop) options to SVG.

Any ideas?

[1] https://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/filters/BevelFilter.html
[2] https://ledrug.wordpress.com/2010/09/30/learning-svg-lesson-2/

RE: BevelFilter

Posted by Yishay Weiss <yi...@hotmail.com>.
Thanks, Alex and Om. Will pick this up on Sunday.



________________________________
From: OmPrakash Muppirala <bi...@gmail.com>
Sent: Wednesday, January 9, 2019 10:07:15 PM
To: dev@royale.apache.org
Subject: Re: BevelFilter

It seems like using the feConvolveMatrix lets you achieve bevel (and other
kinds of effects)
The basic approach is described here:
https://vanseodesign.com/web-design/svg-filter-primitives-feconvolvematrix/

This article points to this one: http://setosa.io/ev/image-kernels/ where
you can experiment with live images to figure the matrix and tweak it for a
given set of effects.

Some documentation on the feConvolveMatrix:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix

Hope this helps.

Thanks,
Om

On Wed, Jan 9, 2019 at 11:52 AM Alex Harui <ah...@adobe.com.invalid> wrote:

> IMO, the parameters in Flash or PS affect the 3D model.  PS might use
> pixel-based edge detection, not sure about Flash.  The key piece is the
> "extrusion".
>
> I would guess that Flash does not control the direction of the extrusion
> while PS does with its "Direction" property.
> In PS, it looks like "depth" is how thick the extrusion is.  That might be
> the same as Flash's "strength".
> In PS, it looks like "size" is the number of pixels of beveling.  That
> might be Flash's "distance".
> PS's "soften" is probably "Flash's "blur".
>
> I think the way it works is, given the outline of a shape, if you had a
> pile of soft bricks of clay, you would:
> -Fill the shape with a layer of bricks.  Put on as many layers of bricks
> as the "depth" or "strength".
> -Based on the depth, look at the "size" or "distance" and remove bricks or
> slice off parts of the bricks along the edge so that the layers of bricks
> don't go straight up, they are angled/beveled.
> -Position your lights of the correct colors.
> -Apply a soften/blur effect on the edges.
>
> HTH,
> -Alex
>
> On 1/9/19, 12:45 AM, "Yishay Weiss" <yi...@hotmail.com> wrote:
>
>     I did skim through that one. What I really wanted was what Anonymous
> asked for in the comments section, but maybe it’s worth trying to implement
> something according to the explanation that’s there and test to see how
> different it is to the flash implementation.
>
>
>
>     To answer your other questions, we want to solve the generic problem
> (we’re writing an editor, so we can’t assume users will only use a certain
> shape) for SVG.
>
>
>
>     Thanks.
>
>
>
>     ________________________________
>     From: Alex Harui <ah...@adobe.com.INVALID>
>     Sent: Wednesday, January 9, 2019 10:24:05 AM
>     To: dev@royale.apache.org
>     Subject: Re: BevelFilter
>
>     This is not my area of expertise at all, but have you seen this?
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.rw-designer.com%2Fbevel-effect-explained&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=xWAx5RmvSCU2hB7ButzRXgogv4B9bemiHm%2BqpNxbvjU%3D&amp;reserved=0
>
>     IIRC, there are vector effects, and pixel effects.  Vector effects
> basically alter the vectors that compose the graphic.  Pixel effects
> post-process the drawn pixels.
>
>     I think a basic Bevel effect may be a vector effect.  The Flash one
> might require pixel effects as well to implement blur.  The article I
> linked to implies that the basic bevel effect is a 3D modeling problem.  Do
> you have to use SVG or can you use WebGL or some 3D library?
>
>     Also consider whether you have to bevel "anything" or something
> simple.  To bevel a rectangular border can be relatively simple, IIRC.
>
>     HTH,
>     -Alex
>
>     On 1/8/19, 11:54 PM, "Yishay Weiss" <yi...@hotmail.com> wrote:
>
>         [1]
> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3schools.com%2Fgraphics%2Fsvg_filters_intro.asp&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=KuKtmtrDSwsMIaq4lMkz6b9OomWSHT1YMRZMghNCqb4%3D&amp;reserved=0
>
>
>
>         ________________________________
>         From: Yishay Weiss <yi...@hotmail.com>
>         Sent: Wednesday, January 9, 2019 9:53:32 AM
>         To: dev@royale.apache.org
>         Subject: RE: BevelFilter
>
>         Hi Olaf,
>
>
>
>         Well, I was hoping to write a Royale bead rather than use a third
> party library. I’m more interested in the alogorithm used for flash and
> Photoshop, assuming that’s easily translatable to SVG [1] filters.
>
>
>
>         Yishay
>
>
>
>         ________________________________
>         From: Olaf Krueger <ma...@olafkrueger.net>
>         Sent: Tuesday, January 8, 2019 1:55:09 PM
>         To: dev@royale.apache.org
>         Subject: Re: BevelFilter
>
>         Hi Yishay,
>         maybe it's worth to give GreenSock/GSAP a try [1][2]?
>         They provided a BevelFilterPlugin for AS3, maybe they ported it to
> SVG?
>         I am not sure about the license...
>
>         Olaf
>
>         [1]
>
> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fgsap&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=1cW23T%2Bt06XyjSQV4gLKoDq1%2FkA1qkT0wx2UOPiossk%3D&amp;reserved=0
>
>         [2]
>
> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fforums%2Ftopic%2F16855-animated-masked-svg-bevel-and-carve%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=I15PbQAwwDoRGiz1vAd6vZ16fjtyG%2FHzCKrM6yU3%2Fo4%3D&amp;reserved=0
>
>
>
>         --
>         Sent from:
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-royale-development.20373.n8.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=K%2Byn93E7U72iic1MNnkiy8sqQpxye21O2pygc84aXAk%3D&amp;reserved=0
>
>
>
>
>

Re: BevelFilter

Posted by OmPrakash Muppirala <bi...@gmail.com>.
It seems like using the feConvolveMatrix lets you achieve bevel (and other
kinds of effects)
The basic approach is described here:
https://vanseodesign.com/web-design/svg-filter-primitives-feconvolvematrix/

This article points to this one: http://setosa.io/ev/image-kernels/ where
you can experiment with live images to figure the matrix and tweak it for a
given set of effects.

Some documentation on the feConvolveMatrix:
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/feConvolveMatrix

Hope this helps.

Thanks,
Om

On Wed, Jan 9, 2019 at 11:52 AM Alex Harui <ah...@adobe.com.invalid> wrote:

> IMO, the parameters in Flash or PS affect the 3D model.  PS might use
> pixel-based edge detection, not sure about Flash.  The key piece is the
> "extrusion".
>
> I would guess that Flash does not control the direction of the extrusion
> while PS does with its "Direction" property.
> In PS, it looks like "depth" is how thick the extrusion is.  That might be
> the same as Flash's "strength".
> In PS, it looks like "size" is the number of pixels of beveling.  That
> might be Flash's "distance".
> PS's "soften" is probably "Flash's "blur".
>
> I think the way it works is, given the outline of a shape, if you had a
> pile of soft bricks of clay, you would:
> -Fill the shape with a layer of bricks.  Put on as many layers of bricks
> as the "depth" or "strength".
> -Based on the depth, look at the "size" or "distance" and remove bricks or
> slice off parts of the bricks along the edge so that the layers of bricks
> don't go straight up, they are angled/beveled.
> -Position your lights of the correct colors.
> -Apply a soften/blur effect on the edges.
>
> HTH,
> -Alex
>
> On 1/9/19, 12:45 AM, "Yishay Weiss" <yi...@hotmail.com> wrote:
>
>     I did skim through that one. What I really wanted was what Anonymous
> asked for in the comments section, but maybe it’s worth trying to implement
> something according to the explanation that’s there and test to see how
> different it is to the flash implementation.
>
>
>
>     To answer your other questions, we want to solve the generic problem
> (we’re writing an editor, so we can’t assume users will only use a certain
> shape) for SVG.
>
>
>
>     Thanks.
>
>
>
>     ________________________________
>     From: Alex Harui <ah...@adobe.com.INVALID>
>     Sent: Wednesday, January 9, 2019 10:24:05 AM
>     To: dev@royale.apache.org
>     Subject: Re: BevelFilter
>
>     This is not my area of expertise at all, but have you seen this?
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.rw-designer.com%2Fbevel-effect-explained&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=xWAx5RmvSCU2hB7ButzRXgogv4B9bemiHm%2BqpNxbvjU%3D&amp;reserved=0
>
>     IIRC, there are vector effects, and pixel effects.  Vector effects
> basically alter the vectors that compose the graphic.  Pixel effects
> post-process the drawn pixels.
>
>     I think a basic Bevel effect may be a vector effect.  The Flash one
> might require pixel effects as well to implement blur.  The article I
> linked to implies that the basic bevel effect is a 3D modeling problem.  Do
> you have to use SVG or can you use WebGL or some 3D library?
>
>     Also consider whether you have to bevel "anything" or something
> simple.  To bevel a rectangular border can be relatively simple, IIRC.
>
>     HTH,
>     -Alex
>
>     On 1/8/19, 11:54 PM, "Yishay Weiss" <yi...@hotmail.com> wrote:
>
>         [1]
> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3schools.com%2Fgraphics%2Fsvg_filters_intro.asp&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=KuKtmtrDSwsMIaq4lMkz6b9OomWSHT1YMRZMghNCqb4%3D&amp;reserved=0
>
>
>
>         ________________________________
>         From: Yishay Weiss <yi...@hotmail.com>
>         Sent: Wednesday, January 9, 2019 9:53:32 AM
>         To: dev@royale.apache.org
>         Subject: RE: BevelFilter
>
>         Hi Olaf,
>
>
>
>         Well, I was hoping to write a Royale bead rather than use a third
> party library. I’m more interested in the alogorithm used for flash and
> Photoshop, assuming that’s easily translatable to SVG [1] filters.
>
>
>
>         Yishay
>
>
>
>         ________________________________
>         From: Olaf Krueger <ma...@olafkrueger.net>
>         Sent: Tuesday, January 8, 2019 1:55:09 PM
>         To: dev@royale.apache.org
>         Subject: Re: BevelFilter
>
>         Hi Yishay,
>         maybe it's worth to give GreenSock/GSAP a try [1][2]?
>         They provided a BevelFilterPlugin for AS3, maybe they ported it to
> SVG?
>         I am not sure about the license...
>
>         Olaf
>
>         [1]
>
> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fgsap&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=1cW23T%2Bt06XyjSQV4gLKoDq1%2FkA1qkT0wx2UOPiossk%3D&amp;reserved=0
>
>         [2]
>
> https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fforums%2Ftopic%2F16855-animated-masked-svg-bevel-and-carve%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=I15PbQAwwDoRGiz1vAd6vZ16fjtyG%2FHzCKrM6yU3%2Fo4%3D&amp;reserved=0
>
>
>
>         --
>         Sent from:
> https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-royale-development.20373.n8.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=K%2Byn93E7U72iic1MNnkiy8sqQpxye21O2pygc84aXAk%3D&amp;reserved=0
>
>
>
>
>

Re: BevelFilter

Posted by Alex Harui <ah...@adobe.com.INVALID>.
IMO, the parameters in Flash or PS affect the 3D model.  PS might use pixel-based edge detection, not sure about Flash.  The key piece is the "extrusion".

I would guess that Flash does not control the direction of the extrusion while PS does with its "Direction" property.
In PS, it looks like "depth" is how thick the extrusion is.  That might be the same as Flash's "strength".
In PS, it looks like "size" is the number of pixels of beveling.  That might be Flash's "distance".
PS's "soften" is probably "Flash's "blur".

I think the way it works is, given the outline of a shape, if you had a pile of soft bricks of clay, you would:
-Fill the shape with a layer of bricks.  Put on as many layers of bricks as the "depth" or "strength".
-Based on the depth, look at the "size" or "distance" and remove bricks or slice off parts of the bricks along the edge so that the layers of bricks don't go straight up, they are angled/beveled.
-Position your lights of the correct colors.
-Apply a soften/blur effect on the edges.

HTH,
-Alex

On 1/9/19, 12:45 AM, "Yishay Weiss" <yi...@hotmail.com> wrote:

    I did skim through that one. What I really wanted was what Anonymous asked for in the comments section, but maybe it’s worth trying to implement something according to the explanation that’s there and test to see how different it is to the flash implementation.
    
    
    
    To answer your other questions, we want to solve the generic problem (we’re writing an editor, so we can’t assume users will only use a certain shape) for SVG.
    
    
    
    Thanks.
    
    
    
    ________________________________
    From: Alex Harui <ah...@adobe.com.INVALID>
    Sent: Wednesday, January 9, 2019 10:24:05 AM
    To: dev@royale.apache.org
    Subject: Re: BevelFilter
    
    This is not my area of expertise at all, but have you seen this?  https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fwww.rw-designer.com%2Fbevel-effect-explained&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=xWAx5RmvSCU2hB7ButzRXgogv4B9bemiHm%2BqpNxbvjU%3D&amp;reserved=0
    
    IIRC, there are vector effects, and pixel effects.  Vector effects basically alter the vectors that compose the graphic.  Pixel effects post-process the drawn pixels.
    
    I think a basic Bevel effect may be a vector effect.  The Flash one might require pixel effects as well to implement blur.  The article I linked to implies that the basic bevel effect is a 3D modeling problem.  Do you have to use SVG or can you use WebGL or some 3D library?
    
    Also consider whether you have to bevel "anything" or something simple.  To bevel a rectangular border can be relatively simple, IIRC.
    
    HTH,
    -Alex
    
    On 1/8/19, 11:54 PM, "Yishay Weiss" <yi...@hotmail.com> wrote:
    
        [1] https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3schools.com%2Fgraphics%2Fsvg_filters_intro.asp&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=KuKtmtrDSwsMIaq4lMkz6b9OomWSHT1YMRZMghNCqb4%3D&amp;reserved=0
    
    
    
        ________________________________
        From: Yishay Weiss <yi...@hotmail.com>
        Sent: Wednesday, January 9, 2019 9:53:32 AM
        To: dev@royale.apache.org
        Subject: RE: BevelFilter
    
        Hi Olaf,
    
    
    
        Well, I was hoping to write a Royale bead rather than use a third party library. I’m more interested in the alogorithm used for flash and Photoshop, assuming that’s easily translatable to SVG [1] filters.
    
    
    
        Yishay
    
    
    
        ________________________________
        From: Olaf Krueger <ma...@olafkrueger.net>
        Sent: Tuesday, January 8, 2019 1:55:09 PM
        To: dev@royale.apache.org
        Subject: Re: BevelFilter
    
        Hi Yishay,
        maybe it's worth to give GreenSock/GSAP a try [1][2]?
        They provided a BevelFilterPlugin for AS3, maybe they ported it to SVG?
        I am not sure about the license...
    
        Olaf
    
        [1]
        https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fgsap&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=1cW23T%2Bt06XyjSQV4gLKoDq1%2FkA1qkT0wx2UOPiossk%3D&amp;reserved=0
    
        [2]
        https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fforums%2Ftopic%2F16855-animated-masked-svg-bevel-and-carve%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=I15PbQAwwDoRGiz1vAd6vZ16fjtyG%2FHzCKrM6yU3%2Fo4%3D&amp;reserved=0
    
    
    
        --
        Sent from: https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-royale-development.20373.n8.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C5bb8051c78a444adf4e408d6760ecf0c%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826203305954160&amp;sdata=K%2Byn93E7U72iic1MNnkiy8sqQpxye21O2pygc84aXAk%3D&amp;reserved=0
    
    
    


RE: BevelFilter

Posted by Yishay Weiss <yi...@hotmail.com>.
I did skim through that one. What I really wanted was what Anonymous asked for in the comments section, but maybe it’s worth trying to implement something according to the explanation that’s there and test to see how different it is to the flash implementation.



To answer your other questions, we want to solve the generic problem (we’re writing an editor, so we can’t assume users will only use a certain shape) for SVG.



Thanks.



________________________________
From: Alex Harui <ah...@adobe.com.INVALID>
Sent: Wednesday, January 9, 2019 10:24:05 AM
To: dev@royale.apache.org
Subject: Re: BevelFilter

This is not my area of expertise at all, but have you seen this?  http://www.rw-designer.com/bevel-effect-explained

IIRC, there are vector effects, and pixel effects.  Vector effects basically alter the vectors that compose the graphic.  Pixel effects post-process the drawn pixels.

I think a basic Bevel effect may be a vector effect.  The Flash one might require pixel effects as well to implement blur.  The article I linked to implies that the basic bevel effect is a 3D modeling problem.  Do you have to use SVG or can you use WebGL or some 3D library?

Also consider whether you have to bevel "anything" or something simple.  To bevel a rectangular border can be relatively simple, IIRC.

HTH,
-Alex

On 1/8/19, 11:54 PM, "Yishay Weiss" <yi...@hotmail.com> wrote:

    [1] https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3schools.com%2Fgraphics%2Fsvg_filters_intro.asp&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=X%2BfpYa02LFDAqPL5aRuigSWqq3h%2BnE%2BqgitAqVBwOGc%3D&amp;reserved=0



    ________________________________
    From: Yishay Weiss <yi...@hotmail.com>
    Sent: Wednesday, January 9, 2019 9:53:32 AM
    To: dev@royale.apache.org
    Subject: RE: BevelFilter

    Hi Olaf,



    Well, I was hoping to write a Royale bead rather than use a third party library. I’m more interested in the alogorithm used for flash and Photoshop, assuming that’s easily translatable to SVG [1] filters.



    Yishay



    ________________________________
    From: Olaf Krueger <ma...@olafkrueger.net>
    Sent: Tuesday, January 8, 2019 1:55:09 PM
    To: dev@royale.apache.org
    Subject: Re: BevelFilter

    Hi Yishay,
    maybe it's worth to give GreenSock/GSAP a try [1][2]?
    They provided a BevelFilterPlugin for AS3, maybe they ported it to SVG?
    I am not sure about the license...

    Olaf

    [1]
    https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fgsap&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=t4INgD9E8SAcw2Qf3NOiUQh46jH%2FdFpxcz1vS1xeAQE%3D&amp;reserved=0

    [2]
    https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fforums%2Ftopic%2F16855-animated-masked-svg-bevel-and-carve%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=tSsKROW8xhsBSnniU3affIvojjKFx2tq%2FOgaHneJea8%3D&amp;reserved=0



    --
    Sent from: https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-royale-development.20373.n8.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=0%2BvGWK6EsfwbFJuOCb1jO%2FNBpAGajUk0aVB7ns2S78Q%3D&amp;reserved=0



Re: BevelFilter

Posted by Alex Harui <ah...@adobe.com.INVALID>.
This is not my area of expertise at all, but have you seen this?  http://www.rw-designer.com/bevel-effect-explained

IIRC, there are vector effects, and pixel effects.  Vector effects basically alter the vectors that compose the graphic.  Pixel effects post-process the drawn pixels.

I think a basic Bevel effect may be a vector effect.  The Flash one might require pixel effects as well to implement blur.  The article I linked to implies that the basic bevel effect is a 3D modeling problem.  Do you have to use SVG or can you use WebGL or some 3D library?

Also consider whether you have to bevel "anything" or something simple.  To bevel a rectangular border can be relatively simple, IIRC.

HTH,
-Alex

On 1/8/19, 11:54 PM, "Yishay Weiss" <yi...@hotmail.com> wrote:

    [1] https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fwww.w3schools.com%2Fgraphics%2Fsvg_filters_intro.asp&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=X%2BfpYa02LFDAqPL5aRuigSWqq3h%2BnE%2BqgitAqVBwOGc%3D&amp;reserved=0
    
    
    
    ________________________________
    From: Yishay Weiss <yi...@hotmail.com>
    Sent: Wednesday, January 9, 2019 9:53:32 AM
    To: dev@royale.apache.org
    Subject: RE: BevelFilter
    
    Hi Olaf,
    
    
    
    Well, I was hoping to write a Royale bead rather than use a third party library. I’m more interested in the alogorithm used for flash and Photoshop, assuming that’s easily translatable to SVG [1] filters.
    
    
    
    Yishay
    
    
    
    ________________________________
    From: Olaf Krueger <ma...@olafkrueger.net>
    Sent: Tuesday, January 8, 2019 1:55:09 PM
    To: dev@royale.apache.org
    Subject: Re: BevelFilter
    
    Hi Yishay,
    maybe it's worth to give GreenSock/GSAP a try [1][2]?
    They provided a BevelFilterPlugin for AS3, maybe they ported it to SVG?
    I am not sure about the license...
    
    Olaf
    
    [1]
    https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fgsap&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=t4INgD9E8SAcw2Qf3NOiUQh46jH%2FdFpxcz1vS1xeAQE%3D&amp;reserved=0
    
    [2]
    https://na01.safelinks.protection.outlook.com/?url=https%3A%2F%2Fgreensock.com%2Fforums%2Ftopic%2F16855-animated-masked-svg-bevel-and-carve%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=tSsKROW8xhsBSnniU3affIvojjKFx2tq%2FOgaHneJea8%3D&amp;reserved=0
    
    
    
    --
    Sent from: https://na01.safelinks.protection.outlook.com/?url=http%3A%2F%2Fapache-royale-development.20373.n8.nabble.com%2F&amp;data=02%7C01%7Caharui%40adobe.com%7C6c6db802bf884b353dce08d67607b5ef%7Cfa7b1b5a7b34438794aed2c178decee1%7C0%7C0%7C636826172827584997&amp;sdata=0%2BvGWK6EsfwbFJuOCb1jO%2FNBpAGajUk0aVB7ns2S78Q%3D&amp;reserved=0
    


RE: BevelFilter

Posted by Yishay Weiss <yi...@hotmail.com>.
[1] https://www.w3schools.com/graphics/svg_filters_intro.asp



________________________________
From: Yishay Weiss <yi...@hotmail.com>
Sent: Wednesday, January 9, 2019 9:53:32 AM
To: dev@royale.apache.org
Subject: RE: BevelFilter

Hi Olaf,



Well, I was hoping to write a Royale bead rather than use a third party library. I’m more interested in the alogorithm used for flash and Photoshop, assuming that’s easily translatable to SVG [1] filters.



Yishay



________________________________
From: Olaf Krueger <ma...@olafkrueger.net>
Sent: Tuesday, January 8, 2019 1:55:09 PM
To: dev@royale.apache.org
Subject: Re: BevelFilter

Hi Yishay,
maybe it's worth to give GreenSock/GSAP a try [1][2]?
They provided a BevelFilterPlugin for AS3, maybe they ported it to SVG?
I am not sure about the license...

Olaf

[1]
https://greensock.com/gsap

[2]
https://greensock.com/forums/topic/16855-animated-masked-svg-bevel-and-carve/



--
Sent from: http://apache-royale-development.20373.n8.nabble.com/

RE: BevelFilter

Posted by Yishay Weiss <yi...@hotmail.com>.
Hi Olaf,



Well, I was hoping to write a Royale bead rather than use a third party library. I’m more interested in the alogorithm used for flash and Photoshop, assuming that’s easily translatable to SVG [1] filters.



Yishay



________________________________
From: Olaf Krueger <ma...@olafkrueger.net>
Sent: Tuesday, January 8, 2019 1:55:09 PM
To: dev@royale.apache.org
Subject: Re: BevelFilter

Hi Yishay,
maybe it's worth to give GreenSock/GSAP a try [1][2]?
They provided a BevelFilterPlugin for AS3, maybe they ported it to SVG?
I am not sure about the license...

Olaf

[1]
https://greensock.com/gsap

[2]
https://greensock.com/forums/topic/16855-animated-masked-svg-bevel-and-carve/



--
Sent from: http://apache-royale-development.20373.n8.nabble.com/

Re: BevelFilter

Posted by Olaf Krueger <ma...@olafkrueger.net>.
Hi Yishay,
maybe it's worth to give GreenSock/GSAP a try [1][2]?
They provided a BevelFilterPlugin for AS3, maybe they ported it to SVG?
I am not sure about the license...

Olaf

[1]
https://greensock.com/gsap

[2]
https://greensock.com/forums/topic/16855-animated-masked-svg-bevel-and-carve/



--
Sent from: http://apache-royale-development.20373.n8.nabble.com/