셰이더를 필터로 사용

셰이더를 필터로 사용하는 방법은 ActionScript에서 다른 필터를 사용하는 방법과 비슷합니다. 셰이더를 필터로 사용하면 필터링된 이미지(표시 객체 또는 BitmapData 객체)가 셰이더에 전달됩니다. 셰이더는 입력 이미지를 사용하여 일반적으로 원본 이미지의 수정된 버전인 필터 출력을 만듭니다. 필터링된 객체가 표시 객체인 경우 필터링된 표시 객체 대신 셰이더의 출력이 화면에 표시됩니다. 필터링된 객체가 BitmapData 객체인 경우 셰이더의 출력은 BitmapData 객체의 내용이 되며 이 객체의 applyFilter() 메서드가 호출됩니다.

셰이더를 필터로 사용하려면 먼저 셰이더 로드 또는 포함 에 설명된 대로 Shader 객체를 만듭니다. 그런 다음 Shader 객체에 연결되는 ShaderFilter 객체를 만듭니다. ShaderFilter 객체는 필터링된 객체에 적용되는 필터입니다. 객체에 이 필터를 적용하는 방법은 다른 모든 필터를 적용하는 방법과 동일합니다. 표시 객체의 filters 속성에 필터를 전달하거나 BitmapData 객체의 applyFilter() 메서드를 호출합니다. 예를 들어 다음 코드에서는 ShaderFilter 객체를 만들고 homeButton 이라는 표시 객체에 필터를 적용합니다.

var myFilter:ShaderFilter = new ShaderFilter(myShader); 
homeButton.filters = [myFilter];

셰이더를 필터로 사용할 때는 적어도 하나의 입력을 사용하여 셰이더를 정의해야 합니다. 예제와 같이 코드에서 입력 값을 설정하지 마십시오. 대신 필터링된 표시 객체 또는 BitmapData 객체를 입력 이미지로 설정합니다. 두 개 이상의 입력이 필요한 셰이더를 사용하는 경우에는 처음 한 개 외의 입력을 위한 값을 제공합니다.

일부 경우 필터는 원본 이미지의 크기를 변경합니다. 예를 들어 일반적인 그림자 효과는 이미지에 추가되는 그림자가 들어 있는 픽셀을 추가합니다. 이미지 크기를 변경하는 셰이더를 사용하는 경우에는 leftExtension , rightExtension , topExtension 및 bottomExtension 속성을 설정하여 변경할 이미지 크기를 나타냅니다.

다음 예제에서는 셰이더를 필터로 사용하는 방법을 보여 줍니다. 이 예제의 필터는 이미지의 빨강, 녹색 및 파랑 채널 값을 반전시킵니다. 결과는 이미지의 "네거티브" 버전입니다.

중요한 ActionScript 코드는 다음 두 가지 메서드를 중심으로 합니다.

• init() : init() 메서드는 응용 프로그램이 로드될 때 호출됩니다. 이 메서드의 코드에서는 셰이더 바이트코드 파일을 로드합니다.

• onLoadComplete() : onLoadComplete() 메서드의 코드에서는 shader 라는 Shader 객체를 만듭니다. 그런 다음 target 이라는 객체의 내용을 만들고 그립니다. target 객체는 왼쪽이 빨강이고 가운데가 황록색이며 오른쪽이 연한 파랑인 선형 그래디언트 색상으로 채워진 사각형입니다. 필터링되지 않은 객체는 다음과 같이 나타납니다.

  

  필터가 적용된 경우 색상이 반전되며 사각형이 다음과 같이 나타납니다.

  

이 예제에서 사용하는 셰이더는 Pixel Bender Toolkit에 포함된 "invertRGB.pbk" 샘플 Pixel Bender 커널입니다. 소스 코드는 Pixel Bender Toolkit 설치 디렉토리의 "invertRGB.pbk" 파일에 있습니다. 소스 코드를 컴파일하고 해당 바이트코드 파일을 ActionScript 소스 코드와 동일한 디렉토리에 "invertRGB.pbj"라는 이름으로 저장합니다.

다음은 이 예제에 대한 ActionScript 코드입니다. 이 클래스는 Flash Builder에서 ActionScript 전용 프로젝트의 기본 응용 프로그램 클래스로 사용하거나 Flash Professional에서 FLA 파일의 문서 클래스로 사용합니다.

package 
{ 
    import flash.display.GradientType; 
    import flash.display.Graphics; 
    import flash.display.Shader; 
    import flash.display.Shape; 
    import flash.display.Sprite; 
    import flash.filters.ShaderFilter; 
    import flash.events.Event; 
    import flash.geom.Matrix; 
    import flash.net.URLLoader; 
    import flash.net.URLLoaderDataFormat; 
    import flash.net.URLRequest; 
     
    public class InvertRGB extends Sprite 
    { 
        private var shader:Shader; 
        private var loader:URLLoader; 
         
        public function InvertRGB() 
        { 
            init(); 
        } 
         
        private function init():void 
        { 
            loader = new URLLoader(); 
            loader.dataFormat = URLLoaderDataFormat.BINARY; 
            loader.addEventListener(Event.COMPLETE, onLoadComplete); 
            loader.load(new URLRequest("invertRGB.pbj")); 
        } 
         
         
        private function onLoadComplete(event:Event):void 
        { 
            shader = new Shader(loader.data); 
             
            var target:Shape = new Shape(); 
            addChild(target); 
             
            var g:Graphics = target.graphics; 
            var c:Array = [0x990000, 0x445500, 0x007799]; 
            var a:Array = [255, 255, 255]; 
            var r:Array = [0, 127, 255]; 
            var m:Matrix = new Matrix(); 
            m.createGradientBox(w, h); 
            g.beginGradientFill(GradientType.LINEAR, c, a, r, m); 
            g.drawRect(10, 10, w, h); 
            g.endFill(); 
             
            var invertFilter:ShaderFilter = new ShaderFilter(shader); 
            target.filters = [invertFilter]; 
        } 
    } 
}

필터를 적용하는 방법에 대한 자세한 내용은 필터 작성 및 적용 을 참조하십시오.

Twitter™ 및 Facebook 게시물은 Creative Commons 약관을 적용받지 않습니다.