Oh! Summer!


Summer is so nice!

Like the balminess of Un Jardin Sur Le Nil,

Green mango,



Sycamore wood.

Endless bright, richly colorful, sweet, and sweet fruits,

Endless steamed green veggies, with lots of lots of lemons.

Endless lemonade!

Convert Sphere Vertices from Model Space to UV Space in GLSL

Vertices in model space are composed in cartesian coordinates in 3D, where the domain of each dimension ranges from -1 to 1.

To convert sphere vertices from model space to UV space, a simple way is converting theta of a vertex in spherical space, and z value of the vertex in model space, to the UV space.

Converting theta of a vertex in spherical space to the u value in UV space

Theta can be calculated using:

float theta = acos(x / sqrt(x * x + y * y));

The range of the calculated theta is [0, PI], because positive and negative y values yield the same result when calculating the radius (denominator). Thus, to expand the theta to [0, 2PI], we just need to extend theta when y is negative:

if (y < 0.0) theta = 2PI – theta;

Now we can convert theta to u:

float u = theta / 2PI;

The result of u can be visualized in the red channel of the fragment. Looking from the top of the sphere, we get the following result:


Converting z value of a vertex in model space to the v value in UV space

v can be easily calculated by converting z from domain [-1, 1] to [0, 1]:

float v = 0.5 * (z + 1.0);

Visualize v in the blue channel of the fragment and looking at the sphere horizontally:


Draw Strokes in Sky Rendering in GLSL

General framework

  • Pass a list of strokes to the shader as an array
  • For each fragment, compute its stroke force by:
    • Transform the fragment coordinate to the stroke coordinate system (similar to uv space in texture mapping)
    • Find the strokes the fragment belongs to
    • For each stroke the fragment belongs to:
      • Compute the fragment’s distance to the main stroke
      • If the distance is within certain threshold of the width of the main stroke, randomize the fragment’s stroke force. Otherwise, the fragment doesn’t have stoke force.
      • Accumulate the stroke force of current stroke to the fragment’s stroke force.

Transform the fragment coordinate to the stroke coordinate system (similar to uv system)



Simulate Hand-Drawn Strokes


Figure 1: a C++ program simulating hand-drawn strokes.


Figure 2: reference of hand-drawn strokes. From movie “The Little Prince”

So, it’s possible to “draw” crappy strokes by programming! Figure 1 is generated by a C++ program I wrote to simulate the strokes in Figure 2.

The idea is simple: define the size of a stroke with width and height, then randomly generate the starting point and direction of the stroke within the size. Finally, draw the stroke in an image by rasterizing the line. While drawing the stroke, jitter the pixel to be rasterized, and draw more pixels stretching towards sides of the jittered pixel with a random width. The intensities of these pixels are randomized.

Figure 1 is generated by drawing 128 strokes sizing 400/50 in an image of size 800/600.

Proof of the Touching Point Equation of Parabolas


Screenshot of Pixar in a Box (Bonus: completing the proof, Environment Modeling)

The proof of the touching point equation in the environment modeling tutorial of Pixar in a Box is very neat, but it took me a second round to understand. Here I’m writing a note hoping making the proof intuitively understandable.

We need to prove that the touching point P of the parabolas arc and line QR is controlled by t on line QR.

The proof starts with writing P as controlled by a random value s on line QR, where s controls line Q’R’. Then, reforming the equation of P controlled by s on line QR results in another equation, in which P is controlled by t on line Q’R’.

The result of the reformation indicates that P lies on line Q’R’ too. Hence, P is the intersection point of QR and Q’R’.

From the observation of section 4, P becomes the touching point of QR when s is equal to t.

There’s no proof of the observation though. But it’s a very neat one that I want to explain. Now that for any point P in QR, P is either the intersection point with line Q’R’, or the touching point. If s doesn’t equal to t, we can always define the intersection point. Otherwise, P has to be the touching point, because we cannot define this one single intersection point.

Proof completed! DAH!



Summer is finally here!

How can I not like it?


A scent of the freshness.

From the twinkle, limpid pond,

From the lush grove =)


Inhale, and inhale.

Loving balminess melting in.. to my breathe.. to my body..


What a blessing from the blossom.

What a moment of the summer.