When a per-vertex shaded mesh, has advantages over a per pixel shaded mesh in a WebGL application?
This was the topic of my first specialization during my “Game Creation and Producing Course” at the Saxion University of Applied Science. I evaluated the differences between Per Vertex & Per Pixel shading in the context of a WebGL application because I was curious if the usage of vertex shading would allow me to further optimize my WebGL applications.
I worked on a few web-based projects during my internship, which showed me the different requirements, that interactive web-based applications have. When an article about vertex shading sparked my curiosity about its usage to optimize some assets for this use case.
The paper is examining the differences between per vertex and per pixel based shading, to find out when a per vertex shaded mesh, has advantages over a per pixel shaded mesh in a WebGL application, regarding their file sizes and VRAM usage.
To answer this research question I build a praxis-oriented prototype which helped me to compare both techniques in a real-world scenario under different circumstances.
Outcome
My research showed that Vertex shaded meshes are only requiring 38Bytes of data per vertex, while Pixel shaded mesh are claiming two additional bytes per vertex.
This makes vertex color always the more lightweight shading technique, regarding the required file sizes, as long as the mesh does not require additional vertices, which only store color information.
However, if more vertices are required, it's depended on the number of additional vertices. As each pixel of a texture takes up way fewer bytes than a single vertex does. Its therefore only cheaper to add additional vertices for supplementary color information to a mesh if their additional data is not exceeding the data required for an additional texture.