Project Pixworld
By : Madis-Julius Tamberg
The idea of this project is to create a shader in Unity to render everything pixelated, to turn 3d projects into a pixel art game. With it creating materials such as grass to simulate the effect of having grass. Materials like skin that are shiny. Possibly even light simulation.
The main effect is to reduce the need of creating textures for each thing, and have just materials on the 3d objects with paint on them, and the rendering pipeline creates the pixelated art style effect.
https://docs.google.com/document/d/17igFwhMzOzL2ai-DWYYIQisKiq0O6v0T9r9yNUH-AMs/edit?usp=sharing
Milestone 1 (10.03)
- Set up a simple 3D scene with basic object to test out future features on. (1h)
- A simple 3D scene was made, all with cubes, there are different items in there, a fence, dirt, grass, garden plot and an oven.
- Create the shader that pixelates the render. (5h)
- Decide if will be done via post-processing or each materials with its material simulation will have their own unlit or painted pixelated shader. Nothing too fancy, just to pixelate the view.
- Decided for pixelation to work on materials, i made a basic base for materials, that pixelates the object based on the parameters given to it. Ill attach images.
//How many pixels per world unit in unity. float3 pixelres = float3(_ScreenParams.x * 4, _ScreenParams.y * 4, _ScreenParams.y * 4); float3 resolution = float3(_ScreenParams.x, _ScreenParams.y, _ScreenParams.y); //Calculating the pixel size. float3 pixelsize = resolution / pixelres; float3 pixuv = worldPos3D / pixelsize; //Pixelizes it - snaps all values to the lowest pixel in that range. float3 pixelatedUV = floor(pixuv) * pixelsize / resolution; //im not sure yet if i need to normalize the uv to 0-1 range. maybe.
- Think and create a list of possible materials to add.(1h)
| Material | Description |
| Grass | Material that has a texture slot that will make a grasslike/moss like surface, the texture will will give the shape of the grass leaves |
| Dirt | Material that has a texture slot that repeats, making the dirt look like there are pebbles in there and so, maybe give the pebbles volume |
| Wood | Wood, straight forward like wooden planks, visible crevices (not just painted) |
| Bricks | Like a brick wall, given a texture, will procedurally generate bricks on the said object |
| Clay | Like dirt but different. |
| Rocks | Simple, maybe use vertex fragment to generate a randomish rock based on location. |
https://imgur.com/a/work-E8H5BmQ Attach:image.jpg Δ
Milestone 2 (24.03)
- Research about unity's shaders, how lighting, fog, coordinates work. (2-3h)
- Implement a way to take in a black and white texture, and use it to give the object a texture.(5h)
- Completed: The process to use black and white textures was successfully implemented, allowing textures to be applied to objects based on these images.
- Experiment with vertex shader, to make everything based on the size of the pixel. Currently if object length % pixel size != 0, then there will be a leftover smaller pixel.(4h) (BONUS TASK)
Milestone 3 (07.04)
- Implement a method for pixels to snap onto its "grid" with a vertex shader. (3h)
- Completed: Successfully implemented pixel snapping using the vertex shader. This makes so that all object vertecies aligns with the pixel grid.
- Implement that the shader will take a color and combine it with the texture, where the black parts are darkened in the output. (5h)
- Completed: The shader now combines the input color with the texture, darkening the black areas in the resulting image as intended.
Started to write shaders paralel to the main one for other types of materials.
Changed the pixelated grid logic
// How many pixels in an unit float3 pixelAmount = float3(_PixelSize, _PixelSize, _PixelSize); float3 pixelSize = float3(1.0, 1.0, 1.0) / pixelAmount; // Snap the coordinate to the "pixel grid" float3 pixelatedUV = floor(i.worldPos / pixelSize); // Determine which face is being rendered using the normal float3 absNormal = abs(i.normal);
Choosing the face to render and wrapping each pixel of the texture to the pixel "grid"
// Texture size
float2 texSize = float2(8, 8);
float3 absNormal = abs(i.normal);
float2 texCoord;
//Determining which axis to use
if (absNormal.x > absNormal.y && absNormal.x > absNormal.z)
{
texCoord = pixelatedUV.yz;
}
else if (absNormal.y > absNormal.x && absNormal.y > absNormal.z)
{
texCoord = pixelatedUV.xz;
}
else
{
texCoord = pixelatedUV.xy;
}
// Normalize texCoord to texture space and wrap it
texCoord = frac(texCoord / texSize);
Milestone 4 (21.04)
- Create an edge outliner that outlines all geometry to emphasise the objects, which will be done by a post processing effect depending on the camera's depthmap. (4h)
- Create an effect that the texture appears randomly and will be distributed across the object. And fix texture rotation dependant on the face it appears on. (6h)
Final bulid / Video