글그리 블로그

z-depth fog는 높이에 따라 안개를 생성하는 것으로 높은 건물, 깊은 지하를 표현할 때 사용할 수 있는 기법이다. 사진처럼 사선으로 바라보는 깊은 지하를 그리기 위해서는 생각보다 오브젝트의 크기가 커야되는데, 짧은 오브젝트의 바닥면이 보인다면 깊이감이 줄어들 것이다. z-depth fog를 적용시키면 오브젝트의 크기도 크지않게 만들고 깊이감도 줄 수 있다. 과정 Post Process Volume 사용한다. 에디터에서 월드에 Post Process Volume을 추가하고 unbound를 체크한다. volume의 크기에 상관없이 모든 world에 해당 process가 적용되도록 하는 옵션이다. content browser에서 material을 만든다. Material Domain을 Post Proc..

RenderTexture란?렌더링을 할 수 있는 텍스처로 Cocos2d-x 에서 필요한 크기만큼 생성하여 그 위에 그리고 싶은 오브젝트들을 그릴 수 있다. 만들어진 texture에 shader를 적용시켜서 광원 효과를 내거나 작은 renderTexture를 생성해서 미니맵 같은 요소를 만들 수 있다. RenderTexture 생성 auto renderTexture = RenderTexture::create(100, 100, Texture2D::PixelFormat::RGBA8888); // width, height, pixelFormat this->addChild(renderTexture); RenderTexture에 sprite 추가 auto spr = Sprite::create("image.png")..

목표모션 블러 효과를 내기 방법현재 방향을 나타내는 벡터를 셰이더에 전달하여 그 방향으로만 블러 효과를 준다. 코드(MotionBlur.fsh)#ifdef GL_ESprecision lowp float;#endif varying vec2 v_texCoord; uniform vec2 u_stepSize; void main(){ vec4 color = vec4(0.0, 0.0, 0.0, 0.0); color += texture2D(CC_Texture0, v_texCoord + 4.0 * u_stepSize) * 0.06; color += texture2D(CC_Texture0, v_texCoord + 3.0 * u_stepSize) * 0.12; color += texture2D(CC_Texture0, v_..

cocos2d-x에서 셰이더롤 적용하는 방법ShaderCache에 셰이더를 등록하고 적용한다. 코드 GLProgram* shader = new GLProgram(); shader->initWithFilenames("SelectEffect.vsh", "SelectEffect.fsh"); shader->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_POSITION, GLProgram::VERTEX_ATTRIB_POSITION); shader->bindAttribLocation(GLProgram::ATTRIBUTE_NAME_COLOR, GLProgram::VERTEX_ATTRIB_COLOR); shader->bindAttribLocation(GLProgram::ATTRIBUT..

원하는 결과물오브젝트가 선택됨을 나타내려고 주로 사용하는 방법이다. 방법shader를 이용해서 이미지의 외곽주변부의 fragment값을 조작하여 효과를 표현한다. 코드(Blur.fsh)#ifdef GL_ESprecision lowp float;#endif varying vec2 v_texCoord; uniform vec2 u_stepSize; void main(){ vec4 color = texture2D(CC_Texture0, v_texCoord); vec4 result = vec4(0.0, 0.0, 0.0, 0.0); vec2 r_stepSize = vec2(u_stepSize.x, -u_stepSize.y); result += texture2D(CC_Texture0, v_texCoord - -4.0..

게임에서 마우스가 over되거나 이미지가 선택되었음을 표시하는 방법으로 이미지에 외곽선을 그리는 방법을 사용한다. 예)League of Legend 위 효과를 2D에서 Shader를 이용하여 내려 한다. Theoryfragment shader에서 현재 fragment의 상, 하, 좌, 우 fragment의 알파값을 읽어서 해당 fragment가 외곽에 있는 것인지 식별한다.외곽에 있는것으로 식별된 fragment는 기존 texture의 rgb가 아닌 외곽선 rgb값을 가지도록 한다. Code#ifdef GL_ESprecision lowp float;#endif varying vec2 v_texCoord; void main(){ vec4 color = texture2D(CC_Texture0, v_texCo..