OpenGL Shader – 1

GLSL을 사용하는 쉐이더 프로그래밍을 알아보자. 쉐이더는 최신 기술이며 3D 게임에서 경이로운 효과를 내는데 사용된다. 이 글을 통해 쉐이더의 세계에 발을 들여놓자.

이 글과 앞으로 진행될 내용을 이해하기 위해서는 OpenGL 프로그래밍에 익숙해야 한다. 또한 쉐이더를 위한 스펙에 대해 알고 싶다면, OpenGL 2.0과 GLSL에 대한 공식문서를 반드시 읽어보길 바란다.

GLSL은 OpenGL 쉐이딩 언어를 의미하며 종종 “glslang”으로 불리며 ARB(Architectural Review Board) OpenGL에 의해 정의된다.

OpenGL과 경쟁하는 Cg, 즉 Nvidia가 나름대로 만든 또 다른 쉐이더 언어와 GLSL을 비교하거나 누가 더 우수한지 따지지는 않겠다. 그 이유는 지금 여기서는 Cg가 아닌 GLSL에 대해서만 살펴볼 것이기 때문이다.

어떤 언어로든 쉐이더를 작성하기 전에, 그래픽 파이프라인에 대한 기본을 이해하는 것이 매우 중요하다. 그래픽 파이프라인은 쉐이더가 무엇을 하는지, 쉐이더의 종류에는 뭐가 있는지와 같은 쉐이더의 핵심을 제공한다. 또한 쉐이더로 할 수 없는것이 무엇인지에 대한 힌트도 제공한다.

파이프라인에 대한 소개 다음에 GLSL을 위한 OpenGL의 설정에 대해서 알아보겠다. OpenGL 어플리케이션에서 쉐이더를 사용하데 필요한 단계에 대해 자세하게 살펴볼 것이다. 최종적으로 OpenGL 어플리케이션이 매우 유연하고 강력한 효과를 낼 수 있는 방법에 대해 살펴볼 것이다.

몇가지 기본적인 개념으로 데이터 타입(data types), 변수(variables), 문장(statements), 함수(function)의 정의에 대해서 알아본다.

이 글은 ARB 확장과 OpenGL 2.0 버전에 대해 다룬다. 후자는 이미 표준이지만 전자는 향후 표준으로 자리잡을 가능성이 있는 것이다. 차이는 작지만 함수의 이름이나 상수 이름에 약간의 차이를 가지고 있다. 이것들을 구분을 돕기위해 코드에 색상을 넣었다. ARB는 회색으로 OpenGL 2.0은 오렌지 색으로 말이다.

이 적용범위는 실수하기 쉽다. 그러니 혹시 이런 표기에 문제가 있다면 언제든지 내게 알려주길 바란다.

이 글은 점진적으로 작성될 것이므로 글과 데모 프로그램에서 문제가 있을 수 있는데, 이것에 대해서 좀 참아주길 바란다. 비록 사소할지라도 문제를 발견하면 알려주길 바란다. 또한 많은 제안을 해주길 바란다. 부디 이 글을 즐겁게 읽어주길 희망하며 첫번째 GLSL, OpenGL Shader의 첫글을 마치도록 하겠다.

스타일 그리고 템플릿(Style, Template) – {3/3}

이제 우리가 진행해야할 것들은 ListBox에 그려진 이미지들의 정렬상태와 크기를 보기 좋게 하는 일과 사용자가 ListBox의 이미지를 선택하는 조작에서 효과를 넣는 일로써, 이 두가지 일을 하나 하나 해보도록 하겠다.

먼저 첫번째 것을 해결해보자. 태크안에 아래의 코드를 추가하자.



두개의 스타일이 지정되어져 있다. 하나는 ListBox에 대한 스타일을 수정하고 있는데, 이미지 항목을 가로로 정렬하고 수평과 수직에 대해서 가운데 정렬을 지정하고 있다. 또한 ListBox의 모서리 부분을 반지름이 6으로 해서 둥그렇게 나타내도록 한다. 그리고 또 하나의 스타일은 ListBox의 항목의 높이 값을 90 픽셀로 지정하고 있어서, 이미지의 크기를 작게 나타내도록 한다. 이렇게 설정된 스타일에 어울리는 ListBox의 높이와 폭을 아래의 코드를 참고해서 기존의 의 코드를 수정하길 바란다.


         Background="DarkGray" Width="630" Height="110"  
         Margin="10" SelectedIndex="0"/>

실행 결과는 아래와 같다.

자, 이제 남은 것은 사용자가 ListBox의 이미지 항목을 선택했을 경우, 그리고 마우스 커서가 이미지 항목에 놓일 때, 떠날 때에 어떤 효과를 줄것이다. 기본적으로 프로그램이 실행되면 모든 이미지 항목에 투명도를 0.4값을 지정해서 흐릿하게 보일 것이다. 이 상태에서 항목을 선택했을때는 선택된 이미지가 선명하게 되면서 커지게 된다. 또한 마우스 커서를 이미지 항목에 놓게 되면 서서히 이미지가 선명하게되고 마우스 커서가 이미지 항목을 떠나게 되면 항목은 다시 서서히 흐릿하게 보이도록 한다. 코드는 바로 앞에서 추가한

부분을 아래로 수정하면 된다. 기본적으로 어떤 이벤트가 발생시에 적절한 효과를 추가하는 것이므로 태그를 사용하고 과 를 써서 정해진 시간에 맞는 에니메이션 기능을 추가했다. 스타일과 템플릿보다는 에니메이션 효과의 내용이 크므로 자세한 설명은 생략하고 코드만 보이도록 하겠다.

 
  
  
    
      
        
        
      
    

    
      
        
          
            
          
        
      
    

    
      
        
          
            
          
        
      
    
  

최종 실행 결과를 살펴보기에 앞서, 가장 처음 모습을 살짝 다시 보면..

이랬던 아이가 어느덧 커서.. 아래와 같은 美人으로 탄생했다. 스타일과 템플릿의 힘으로 말이다.