|
@@ -118,15 +118,15 @@ Create a quadratic plane mesh in Blender (or any other 3D modelling program). Se
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-1. Export the model as a Collada file called *quad.dae* and drag it into your Defold project.
|
|
|
|
-2. Open *main.collection* and create a new game object called "grade".
|
|
|
|
|
|
+1. Export the model as a Collada file called *`quad.dae`* and drag it into your Defold project.
|
|
|
|
+2. Open *`main.collection`* and create a new game object called "grade".
|
|
3. Add a Model component to the "grade" game object.
|
|
3. Add a Model component to the "grade" game object.
|
|
-3. Set the *Mesh* property of the model component to the *quad.dae* file.
|
|
|
|
|
|
+3. Set the *Mesh* property of the model component to the *`quad.dae`* file.
|
|
|
|
|
|
Leave the game object unscaled at origin. Later, when we render the quad we will project it so it fills the whole screen. But first we need a material and shader programs for the quad:
|
|
Leave the game object unscaled at origin. Later, when we render the quad we will project it so it fills the whole screen. But first we need a material and shader programs for the quad:
|
|
|
|
|
|
-1. Create a new material and call it *grade.material* by right clicking *main* in the *Asset* view and selecting <kbd>New ▸ Material</kbd>.
|
|
|
|
-2. Create a vertex shader program called *grade.vp* and a fragment shader program called *grade.fp* by right clicking *main* in the *Asset* view and selecting <kbd>New ▸ Vertex program</kbd> and <kbd>New ▸ Fragment program</kbd>.
|
|
|
|
|
|
+1. Create a new material and call it *`grade.material`* by right clicking *main* in the *Asset* view and selecting <kbd>New ▸ Material</kbd>.
|
|
|
|
+2. Create a vertex shader program called *`grade.vp`* and a fragment shader program called *`grade.fp`* by right clicking *main* in the *Asset* view and selecting <kbd>New ▸ Vertex program</kbd> and <kbd>New ▸ Fragment program</kbd>.
|
|
3. Open *grade.material* and set the *Vertex program* and *Fragment program* properties to the new shader program files.
|
|
3. Open *grade.material* and set the *Vertex program* and *Fragment program* properties to the new shader program files.
|
|
4. Add a *Vertex constant* named "view_proj" of type `CONSTANT_TYPE_VIEWPROJ`. This is the view and projection matrix used in the vertex program for the quad vertices.
|
|
4. Add a *Vertex constant* named "view_proj" of type `CONSTANT_TYPE_VIEWPROJ`. This is the view and projection matrix used in the vertex program for the quad vertices.
|
|
5. Add a *Sampler* called "original". This will be used to sample pixels from the off-screen render target color buffer.
|
|
5. Add a *Sampler* called "original". This will be used to sample pixels from the off-screen render target color buffer.
|
|
@@ -134,7 +134,7 @@ Leave the game object unscaled at origin. Later, when we render the quad we will
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-7. Open *main.collection*, select the model component in game object "grade" and set its *Material* property to "/main/grade.material".
|
|
|
|
|
|
+7. Open *`main.collection`*, select the model component in game object "grade" and set its *Material* property to "`/main/grade.material`".
|
|
|
|
|
|

|
|

|
|
|
|
|
|
@@ -179,7 +179,7 @@ Now we have the quad model in place with its material and shaders. We just have
|
|
|
|
|
|
## Texturing with the off-screen buffer
|
|
## Texturing with the off-screen buffer
|
|
|
|
|
|
-We need to add a render predicate to the render script so we can draw the quad model. Open *grade.render_script* and edit the `init()` function:
|
|
|
|
|
|
+We need to add a render predicate to the render script so we can draw the quad model. Open *`grade.render_script`* and edit the `init()` function:
|
|
|
|
|
|
```lua
|
|
```lua
|
|
function init(self)
|
|
function init(self)
|
|
@@ -192,7 +192,7 @@ function init(self)
|
|
...
|
|
...
|
|
end
|
|
end
|
|
```
|
|
```
|
|
-1. Add a new predicate matching the "grade" tag that we set in *grade.material*.
|
|
|
|
|
|
+1. Add a new predicate matching the "grade" tag that we set in *`grade.material`*.
|
|
|
|
|
|
After the render target's color buffer has been filled in `update()` we set up a view and a projection that make the quad model fill the whole screen. We then use the render target's color buffer as the quad's texture:
|
|
After the render target's color buffer has been filled in `update()` we set up a view and a projection that make the quad model fill the whole screen. We then use the render target's color buffer as the quad's texture:
|
|
|
|
|
|
@@ -218,8 +218,8 @@ end
|
|
1. Clear the frame buffer. Note that the previous call to `render.clear()` affects the render target, not the screen frame buffer.
|
|
1. Clear the frame buffer. Note that the previous call to `render.clear()` affects the render target, not the screen frame buffer.
|
|
2. Set the viewport to match the window size.
|
|
2. Set the viewport to match the window size.
|
|
3. Set the view to the identity matrix. This means camera is at origin looking straight along the Z axis. Also set the projection to the identity matrix causing the the quad to be projected flat across the whole screen.
|
|
3. Set the view to the identity matrix. This means camera is at origin looking straight along the Z axis. Also set the projection to the identity matrix causing the the quad to be projected flat across the whole screen.
|
|
-4. Set texture slot 0 to the color buffer of the render target. We have sampler "original" at slot 0 in our *grade.material* so the fragment shader will sample from the render target.
|
|
|
|
-5. Draw the predicate we created matching any material with the tag "grade". The quad model uses *grade.material* which sets that tag---thus the quad will be drawn.
|
|
|
|
|
|
+4. Set texture slot 0 to the color buffer of the render target. We have sampler "original" at slot 0 in our *`grade.material`* so the fragment shader will sample from the render target.
|
|
|
|
+5. Draw the predicate we created matching any material with the tag "grade". The quad model uses *`grade.material`* which sets that tag---thus the quad will be drawn.
|
|
6. After drawing, disable texture slot 0 since we are done drawing with it.
|
|
6. After drawing, disable texture slot 0 since we are done drawing with it.
|
|
|
|
|
|
Now let's run the game and see the result:
|
|
Now let's run the game and see the result:
|
|
@@ -292,21 +292,21 @@ By using linear filtering we thus eliminate color quantization and get very good
|
|
|
|
|
|
Let's implement the texture lookup in the fragment shader:
|
|
Let's implement the texture lookup in the fragment shader:
|
|
|
|
|
|
-1. Open *grade.material*.
|
|
|
|
-2. Add a second sampler called "lut" (for lookup table).
|
|
|
|
-3. Set the *Filter min* property to `FILTER_MODE_MIN_LINEAR` and the *Filter mag* property to `FILTER_MODE_MAG_LINEAR`.
|
|
|
|
|
|
+1. Open *`grade.material`*.
|
|
|
|
+2. Add a second sampler called "`lut`" (for lookup table).
|
|
|
|
+3. Set the *`Filter min`* property to `FILTER_MODE_MIN_LINEAR` and the *`Filter mag`* property to `FILTER_MODE_MAG_LINEAR`.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-4. Download the following lookup table texture (*lut16.png*) and add it to your project.
|
|
|
|
|
|
+4. Download the following lookup table texture (*`lut16.png`*) and add it to your project.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-5. Open *main.collection* and set the *lut* texture property to the downloaded lookup texture.
|
|
|
|
|
|
+5. Open *`main.collection`* and set the *`lut`* texture property to the downloaded lookup texture.
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-6. Finally, open *grade.fp* so we can add support for color lookup:
|
|
|
|
|
|
+6. Finally, open *`grade.fp`* so we can add support for color lookup:
|
|
|
|
|
|
```glsl
|
|
```glsl
|
|
varying mediump vec4 position;
|
|
varying mediump vec4 position;
|
|
@@ -367,6 +367,16 @@ To get better blue channel resolution, we can implement the interpolation oursel
|
|
|
|
|
|
So, we should read from two cells:
|
|
So, we should read from two cells:
|
|
|
|
|
|
|
|
+Inline $cell_{low} = \left \lfloor{B \times (N - 1)} \right \rfloor$
|
|
|
|
+
|
|
|
|
+$$cell_{low} = \left \lfloor{B \times (N - 1)} \right \rfloor$$
|
|
|
|
+
|
|
|
|
+```math
|
|
|
|
+cell_{low} = \left \lfloor{B \times (N - 1)} \right \rfloor
|
|
|
|
+```
|
|
|
|
+
|
|
|
|
+
|
|
|
|
+
|
|
$$
|
|
$$
|
|
cell_{low} = \left \lfloor{B \times (N - 1)} \right \rfloor
|
|
cell_{low} = \left \lfloor{B \times (N - 1)} \right \rfloor
|
|
$$
|
|
$$
|
|
@@ -451,7 +461,7 @@ Okay, that was a lot of work to draw something that looks exactly like the origi
|
|
|
|
|
|

|
|

|
|
|
|
|
|
-4. Apply the same color adjustments to the lookup table texture file (*lut16.png*).
|
|
|
|
|
|
+4. Apply the same color adjustments to the lookup table texture file (*`lut16.png`*).
|
|
5. Save the color adjusted lookup table texture file.
|
|
5. Save the color adjusted lookup table texture file.
|
|
6. Replace the texture *lut16.png* used in your Defold project with the color adjusted one.
|
|
6. Replace the texture *lut16.png* used in your Defold project with the color adjusted one.
|
|
7. Run the game!
|
|
7. Run the game!
|