PlaidCTF 2021 Watness 3

In PlaidCTF 2021, I solved the challenge The Watness III, then I spent my time on another challenge dr. Unfortunately, the regular expression algorithm in dr is too complex to understand, thus I failed to solve it.

There was a similar challenge in PlaidCTF 2020, The Watness II. I solved that last year when I was a member of A*0*E; it was a reverse challenge of a HyperCard game on the m68k platform. I thought that this challenge had the same game logic as the previous one, so I spent some time finding the color logic used in The Watness II. But the result shows that this challenge is different from that one.

Program Structure

The first part of main.js implements an AES decryption algorithm, and the second part contains two GLSL shader programs. The JavaScript code uses WebGL to load these two shaders and draw the game. There is an event loop in JavaScript which captures mouse and keyboard events and exchanges data with the shader code.

The JavaScript code gets data from the shader through the readPixels function:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

const x = r => {
  const o = Array.from(new Array(50), (() => [0, 0, 0, 0])),
    n = r - i;
  if (i = r,
    o[10] = g(C[0] + .5),
    o[11] = g(C[1] + .5),
    C = [0, 0],
    m.has("ArrowUp") && (o[2] = h),
    m.has("ArrowDown") && (o[3] = h),
    m.has("ArrowLeft") && (o[0] = h),
    m.has("ArrowRight") && (o[1] = h),
    o[4] = y ? h : d, y = !1,
    o[5] = b ? h : d, b = !1,
    t.set("dt", n),
    t.set("time", r / 1e4),
    t.set("loopback", p.concat(o)),
    e.draw(),
    p = e.readPixels(0, 0, 200),
    !_ && p[150][0]) {
    const e = p.slice(130, 148).map((([e]) => e)),
      t = l.decode(e);
    console.log(t), alert(t), _ = !0
  }
  requestAnimationFrame(x)
};

The length of the loopback array is 250. The first 200 bytes come from p, the data read from the shader. The last 50 bytes are the array o, used for writing data into the shader’s memory. The JavaScript code stores keyboard events in o[0:4], i.e. loopback[200:204], and mouse events in o[4:6], i.e. loopback[204:206]. loopback[150] is the completion flag, and loopback[130:148] is the decryption key.

JavaScript reads data from the pixels of the WebGL canvas, while the shader writes data to loopback by changing pixel colors—actually by setting gl_FragColor.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

#define G(H, I) J(loopback[int(H)].xyz) * I
#define K(H) loopback[int(H)].x
#define L(H) loopback[int(H)].xy
#define M(H) loopback[int(H)].xyz
#define N(H) (loopback[int(H)].x == 0 ? false : true)
#define O(H, I) vec2(G(H, I), G(int(H) + 1, I))
#define P(H, exp) \
  if (gl_FragCoord.y <= 1. && gl_FragCoord.x > H && \
      gl_FragCoord.x <= H + 1.) { \
    gl_FragColor = exp; \
    return; \
  }
#define Q(H, R, I) P(H, vec4(S((R) / (I)), 0.))
#define T(H, R) P(H, vec4(float(R) / 255., 0, 0, 0))
#define U(H, R) P(H, vec4(float(R.xy) / 255., 0, 0))
#define V(H, R) \
  P(H, vec4(float(R.x) / 255., float(R.y) / 255., float(R.z) / 255., 0))
#define W(H, R) P(H, vec4(R ? 1. : 0., 0, 0, 0))

The shader writes data to loopback with functions T, V, and W, and reads data with M. Once we find this trick, we can recover the game logic.

Logic

The variable CP in main records the current level. There are three levels; when all three are cleared, the program sets the completion flag at loopback[150]. The main function selects different rendering functions according to CP.

1
2
3
4
5
6

if (CP == 0)
  Cs = Cl(Bo);
if (CP == 1)
  Cs = Ce(Bo);
if (CP == 2)
  Cs = CN(Bo);

The return value Cs has two members, AA and AB. AB indicates whether we have cleared the current level.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

for (int AO = 0; AO < 6; AO++) {
  if (CP == 0 && Cs.AB) {
    T(130. + float(AO), BU(AO, 6));
  }
  if (CP == 1 && Cs.AB) {
    T(136. + float(AO), BU(AO, 6));
  }
  if (CP == 2 && Cs.AB) {
    T(142. + float(AO), BU(AO, 6));
  }
  T(130. + float(AO), K(int(130.) + AO));
  T(136. + float(AO), K(int(136.) + AO));
  T(142. + float(AO), K(int(142.) + AO));
}
vec3 Ap;
vec2 Ao;
t Cv = t(0, vec3(0, 0, -10), vec3(0, 3, 0), vec3(2, 0, 0), 1);
if (Cs.AB && Ak(focus, surface_loc, Cv, Ao, Ap) >= 0.) {
  gl_FragColor = AH(gl_FragColor, vec4(1, 1, 1, 0.95));
}
if (Cs.AB && AD(viewport_center, Cv.v) < 2.) {
  CP = CP + 1;
}

If Cs.AB is nonzero, we have cleared the level. The decryption key at loopback[130:148] is updated, and CP, which stores the current level, is incremented by one. Looking into Cl, the function for the first level, shows that AB comes from another function, Bj:

1
2
3
4
5
6

z Cl(vec2 Bo) {
  bool AA = N(120.);
  bool Bp = Bj(8);
  ……
  return z(AA, Bp);
}

It is obvious that the checking logic is in Bj:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

bool Bj(int AU) {
  for (int AO = 0; AO < 100 - 1; AO++) {
    ivec3 Aj = M(int(0.) + AO);
    ivec3 Ag = M(int(0.) + AO + 1);
    if (Aj == ivec3(255, 255, 1)) {
      return false;
    }
    if (Aj == ivec3(AU - 1, AU - 1, 1)) {
      return true;
    }
    float Bk = (float(Aj.x) + float(Ag.x)) / (2. * float(AU));
    float Bl = (float(Aj.y) + float(Ag.y)) / (2. * float(AU));
    vec4 Bm = texture2D(introImage, vec2(Bk, Bl));
    if (Bm.a >= 1.) {
      return false;
    }
  }
  return false;
}

By adding console.log(p.concat(o)) to the JavaScript event loop, we can inspect the loopback array. The macro M reads the player’s moves. If you have learned about OpenGL, you will notice that texture2D returns a pixel from a texture. Bj maps every edge of our path to a pixel in introImage, then checks whether that pixel’s alpha value is less than 255. Inspecting the image with the Python library PIL reveals that some pixels have an alpha value of 254. We can use depth-first search to find a possible path.

The introImage texture is this picture:

The other two levels have function structures similar to the first. Their checker functions are Bi and BZ. The checker for the second level checks only the points we pass, not the edges, so we can easily find a possible path. The third checker is more interesting:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

ivec3 Be = M(int(0.) + AO - 1);
ivec3 Aj = M(int(0.) + AO);
ivec3 Ag = M(int(0.) + AO + 1);
if (Ag == ivec3(255, 255, 1)) {
  return false;
}
if (Ag == ivec3(AU - 1, AU - 1, 1) && Bc == 14 && Bd == 14) {
  return true;
}
vec3 Bf = vec3(Ag - Aj);
vec3 Bg = vec3(Be - Aj);
vec3 Bh = cross(Bf, Bg);
if (Bh.z != 0.) {
  for (int BV = 0; BV < 14; BV++) {
    if (Bh.z < -0.5) {
      if (Bd >= 14)
        return false;
      if (BV == Bd) {
        if (Bb[BV] != Aj.xy)
          return false;
        Bd++;
        break;
      }
    }
    if (Bh.z > 0.5) {
      if (Bc >= 14)
        return false;
      if (BV == Bc) {
        if (Ba[BV] != Aj.xy)
          return false;
        Bc++;
        break;
      }
    }
  }
}

Bf and Bg are the vectors of the current and previous edges on our path. Bh is the cross product of these two vectors. If Bf and Bg are parallel, the result’s z component is zero. Whether the z component is positive or negative depends on the angle between them. We can now see the logic: there is no restriction on walking straight, but when we turn clockwise or counterclockwise, our position must be one of the positions in Ba or Bb. We can find the correct path backwards from the final goal.

Solution

The author of this challenge displays sophisticated computer-graphics programming skill. The first two levels can be cleared by playing the game, yielding their decryption keys. But the map in the third level is placed upside down to make it harder to play. I had to study the key-generation algorithm in AO and calculate the last decryption key directly.

We input the decryption key into the JavaScript code, and it displays the flag automatically.

Flag: pctf{ok_but_this_is_the_last_one_i_promise_T__T}