On UAL Git
https://git.arts.ac.uk/22044483/C1-Final (Repository)
https://git.arts.ac.uk/pages/22044483/C1-Final/ (Git Page)
On GitHub
https://github.com/Pannic17/C1-Final (Repository)
https://pannic17.github.io/C1-Final/ (GitHub Page)
Built with Vue.js + Vite
This project using three.js to generate an online music-3D pad with interactive graphic animations using shaders.
A Cute Pokemon model sets at the center of the screen and swing as the music beats. When user press different keys on keyboard or click/tap on different area of the page, various effect generate accordingly and play audio effects. Press SPACE will change the model and background color.
There are 20 built-in effects or animation based on Shaders, Postprocessing and Motion-Graphic animations. The animations will render according to sequence of trigger. Each Path animates individually. Thus, please try to press multiple keys together to see the fascinating combination of effects.
All effects come with a fade-in animation that smooth the transition.
all custom shader can be found at \src\three\shader\
I wrote custom shader to generate different fabulous visual effect and filters. All shader are alpha-channel adaptive.
effect path: \src\three\c\DotEffect.js
Dot Effect generate a dot map covers the full screen and the dots of the color will multiply the 3D model, thus generates a dot-color map; The dot will easy in as the size shrinks.
Press Q
effect path: \src\three\c\GlitchEffect.js
Glitch Effect presents wild image distortion with image.
Press Z
Generate a cross-hatch effect, not significant for this scene. NOT EXPOSED
effect path: \src\three\c\LineEffect.js
Covert the image to a line graph, the width of line varies each time.
Press A
Perform a Luma effects that coverts black pixels to transparent. NOT EXPOSED
Water-paint filter. Used as buffer shader.
effect path: \src\three\c\SliceEffect.js
Slice the 3D image horizontally into pieces.
Press E
effect path: \src\three\c\SobelEffect.js
Sobel effect uses differentiated convolutional kernel to detect and outline the edge of the 3D image. My shader also performs a fade-out of color.
Press R
effect path: \src\three\c\SpiralEffect.js
This shader generates a spiral mask overlay the 3D image, when combining with wave effect, a very beautiful water drop effects will present. The spiral rotates.
Press C
Pool-water filter. Used as buffer shader.
effect path: \src\three\c\SpiralEffect.js
Generates a water wave effects from center to boarder.
Press X
For some effects, I used the built-in postprocessing from three.js\examples
effect path: \src\three\p\AfterEffect.js
This is the AfterimagePass which presents a drag or replica effects.
Press F
effect path: \src\three\p\HalftoneEffect.js
This will convert the 3D image to a scattered spectrum look, there are 3 possible pattern: eclipse, line & square.
Press S
effect path: \src\three\p\NormalEffect.js
This is the effect that shows the normal map generated for the model. I also add WaterShader & PaintShader to generate a thick edge that make the filter more cartoon. This may overlay some effects.
Press T
effect path: \src\three\p\PostEffect.js
This is a postprocessing effect preset of three.js that convert the 3D image to black-white dot screen.
Press V
effect path: \src\three\p\ShiftEffect.js
This split the RGB channels of the origin, thus perform a chromatic aberration effect.
Press W
effect path: \src\three\g\CharEffect.js
Generate lines of Japanese characters that move forward.
Press K
effect path: \src\three\g\CubeEffect.js
Generate particles of cubes that rotate by itself.
Press I
effect path: \src\three\g\HedronEffect.js
Generate a wireframe of polyhedron that rotate around center.
Press L
effect path: \src\three\g\RingEffect.js
Generate a ring rotate around model.
Press P
effect path: \src\three\g\WrapEffect.js
Generate rings that forms a wrap that move toward top.
Press O
Press SPACE will change the model and background color.
Discover your next surprise Pokemon!
All models were downloaded from https://www.models-resource.com/
All audio samples were downloaded from https://www.noiiz.com/
Music is morning flip by StrawberryPapa
Shader reference https://www.shadertoy.com/