Question

这个问题与cocos2d-x有关，因为我使用cocos2d-x作为游戏引擎，但我认为可以使用基本的opengl着色器知识解决它。

第1部分：

。我的画布尺寸为800 * 600

。我尝试绘制一个大小为96 * 96的简单彩色方块，它放在画布的中间

这很简单，绘制部分代码：

var boundingBox = this.getBoundingBox();
var squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
var vertices = [
    boundingBox.width, boundingBox.height, 
    0,                 boundingBox.height,
    boundingBox.width, 0, 
    0,                 0
];
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

gl.enableVertexAttribArray(cc.VERTEX_ATTRIB_POSITION);
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
gl.vertexAttribPointer(cc.VERTEX_ATTRIB_POSITION, 2, gl.FLOAT, false, 0, 0);
gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
gl.bindBuffer(gl.ARRAY_BUFFER, null);

和垂直着色器：

attribute vec4 a_position;

void main()
{
    gl_Position = CC_PMatrix * CC_MVMatrix * a_position;
}

碎片着色器：

#ifdef GL_ES
precision highp float;
#endif

uniform vec2 center;
uniform vec2 resolution;
uniform float rotation;

void main()
{
    vec4 RED = vec4(1.0, 0.0, 0.0, 1.0);
    vec4 GREEN = vec4(0.0, 1.0, 0.0, 1.0);
    gl_FragColor = GREEN;
}

一切正常：

网格线的大小为32 * 32，黑点表示画布的中心。

第2部分：

。我尝试将正方形分成两半（垂直）

。左边部分是绿色，右边部分是红色

我更改了碎片着色器以完成它：

void main()
{
    vec4 RED = vec4(1.0, 0.0, 0.0, 1.0);
    vec4 GREEN = vec4(0.0, 1.0, 0.0, 1.0);

    /*
        x => [0, 1]
        y => [0, 1]
    */
    vec2 UV = (rotatedFragCoord.xy - center.xy + resolution.xy / 2.0) / resolution.xy;

    /* 
        x => [-1, 1]
        y => [-1, 1]
    */
    vec2 POS = -1.0 + 2.0 * UV;

    if (POS.x <= 0.0) {
        gl_FragColor = GREEN;
    }
    else {
        gl_FragColor = RED;
    }
}

制服中心＆＃39;是正方形的位置，所以在这种情况下它是400,300。

统一的决议＆＃39;是正方形的内容大小，因此值为96,96。

结果很好：

第3部分：

。我尝试用cocos2dx样式改变旋转

myShaderNode.setRotation(45);

旋转方块但内容不是：

所以我尝试根据节点的旋转角度旋转内容。

我再次更改了frag shader：

void main()
{
    vec4 RED = vec4(1.0, 0.0, 0.0, 1.0);
    vec4 GREEN = vec4(0.0, 1.0, 0.0, 1.0);

    vec2 rotatedFragCoord = gl_FragCoord.xy - center.xy;
    float cosa = cos(rotation);
    float sina = sin(rotation);
    float t = rotatedFragCoord.x;
    rotatedFragCoord.x = t * cosa - rotatedFragCoord.y * sina + center.x;
    rotatedFragCoord.y = t * sina + rotatedFragCoord.y * cosa + center.y;

    /* 
        x => [0, 1]
        y => [0, 1]
    */
    vec2 UV = (rotatedFragCoord.xy - center.xy + resolution.xy / 2.0) / resolution.xy;

    /* 
        x => [-1, 1]
        y => [-1, 1]
    */
    vec2 POS = -1.0 + 2.0 * UV;

    if (POS.x <= 0.0) {
        gl_FragColor = GREEN;
    }
    else {
        gl_FragColor = RED;
    }
}

均匀旋转是节点旋转的角度，因此在这种情况下它是45°。

结果接近我想要的但仍然不对：

我努力了但是我无法弄清楚我的代码中有什么问题，以及如果有更容易完成任务的话还有什么呢。

我对着色器编程很陌生，任何建议都将不胜感激，谢谢：）

cocos2dx着色器在片段着色器中旋转形状

0 个答案: