Graphics

Toon shading, or cel shading, is a non-photorealistic rendering technique that gives 3D graphics a cartoon-like appearance, commonly seen in various forms of visual media, such as video games and animations. The outlined toon shader achieves the effect signature flat look by quantizing diffuse reflection into a finite number of discrete shades. The makeShader function parses the fragment shader source code to create a vertex shader and an interactive user interface, returning a toon p5....

This demo delves into a WEBGL p5 sketch that builds upon the blur effect with added features. It introduces uniformsUI for interactive shader uniform variables setting (here just the blur intensity), incorporates a focal target defined by the scene’s sole sphere (amidst random toruses and boxes) for enhanced visual depth, and employs first-person directional light to improve immersion. It also showcases the applyShader function, demonstrating its role in applying and managing custom shader effects within the sketch....

Perspective projection is a fundamental concept in 3D graphics. This transformation, akin to morphing a view frustum shape into a cube—known as Normalized Device Coordinates (NDC)—, generates a realistic foreshortening effect when applied to all scene vertices. The visualization below showcases this transformation on a set of cajas, rendered with a custom shader for shape morphing and viewed from a third-person perspective using a secondary camera, which enables the display of the main view frustum....

Post-effects significantly enhance visual rendering, enabling the interactive blending of shader effects like bloom, motion blur, and ambient occlusion into rendered scenes. This demo showcases the blend of blur, noise and pixelate effects using frame buffer objects (FBOs) and WEBGL2 shaders, applied to a scene featuring randomly placed toruses and boxes, with a sphere acting as the dynamic focal point for the blur effect, thereby creating a visually engaging experience....