HGIMG4 에 고품질 circle 대용

HGIMG4에서는 circle 명령을 사용하여 2D 타원을 쉽게 그릴 수 있지만 16분할이며 안티앨리어싱도 걸리지 않습니다. 거기서 묘화 부하가 높은 대신에도 조금 고화질의 타원 묘화를 준비해 보았습니다.
프래그먼트 쉐이더로 사용자 지정의 gcopy (실제로 사용하는 명령은 celput) 를 구현합니다.

셰이더 파일 만들기

먼저 다음 파일을 만듭니다.

res/shaders/sprdisc.frag

#if defined(OPENGL_ES) || defined(GL_ES)
#ifdef GL_FRAGMENT_PRECISION_HIGH
precision highp float;
#else
precision mediump float;
#endif
#endif

#define PI 3.1415926535

uniform vec4 u_px;

uniform sampler2D u_texture;
varying vec2 v_texCoord;

void main() {
    vec2 pxo = (v_texCoord - 0.5) * u_px.z;
    vec2 ned = vec2(abs(pxo.x / u_px.x), abs(pxo.y / u_px.y));
    float yrate = atan(ned.y, ned.x) / PI * 0.5;
    float rate = mix(u_px.x, u_px.y, yrate);

    float lv = rate / u_px.w * (1.0 - length(ned));

    gl_FragColor = texture2D(u_texture, v_texCoord);
    gl_FragColor.a = lv;
}

사용법

셰이더의 uniform u_px 로 파라미터를 조정해 celput(gcopy) 로 실제의 렌더링을 실시합니다.

#include "hgimg4.as"

    gpreset
    setcls CLSMODE_SOLID, 0x000033

    vs = "res/shaders/sprite.vert"
    fs = "res/shaders/sprdisc.frag"
    gpusershader vs,fs, ""
    side = 512
    buffer 2, side,side, screen_offscreen + screen_usergcopy
    celdiv 2, side,side, side/2, side/2
    gpgetmat id_mtl, 2, GPGETMAT_OPT_SCRMAT

// 横半径、縦半径、buffer の一辺の大きさ、アンチエイリアス幅
    gpmatprm4 id_mtl, "u_px", 250.0, 150.0, side, 2.0

    redraw 0
    color 255,128,0
    boxf
    redraw 1

    gsel 0
    gmode 2
    repeat
        getreq fps, SYSREQ_FPS

        redraw 0

        color 224,224,224
        circle 50,50, 400,400, 0

        pos 600,300
        celput 2

        pos 8,8
        mes strf("%2d [fps]", fps)
        redraw 1
        await 1000/60
    loop

실행하면 다음과 같습니다.


실행 결과




왼쪽이 circle 명령, 오른쪽이 이번 타원 그리기


상기 샘플에서는 오렌지색 일색에 발랐습니다만 뭔가 화상을 붙여 타원에 빠지거나 할 수도 있다고 생각합니다.