#Fireworks Festival by Henry Zhu
##Github pages site:
https://pennvr.github.io/three-js-Maknee/
##Techniques:
Perlin noise for mountain generation (necessary for terrain generation)
sin wave for sea movement (most easy to implement)
Three.js particle system for leaves, fireworks, clouds (Cool effects, no need to write shader code for each particle)
Explosiion effect done use of direction vectors (Easy to code up and provides pretty realistic results)
(Fake) Brightness is generated by using various THREE.js materials, colors and textures (lighting is expensive)
##Instructions on setup:
Setup oculus hardware
Run the oculus program - Enable Unknown Sources
Click the git pages link above
If you want to run locally:
Run Chromium or Firefox Nightly with WEBVR support enabled
Download the project source files
Drag and drop index.html into Chromium or Firefox Nightly to play!
Note: You can directly play by dragging the html file into Firefox Nightly. However, Chromium requires a local server to load all necessary textures from the scene. (Setup a local server via npm or python and connect to localhost on Chromium)
##VR motion sickness:
I can feel a bit of motion sickness due to the rapid movement of clouds and leaf particles. They move so fast at times that it's hard to keep track of where you are in the scene. Although, if I focus on a particular tree or firework, the motion sickness is weaker.
##Hardest part of the assignment:
If I had to choose, the hardest part was learning how the THREE.js particle system functioned. The particle system was not really well documented (at least for me) and I had to look online for some guidance on the particle system. I first implemented a deprecated particle system and had to switch over to the up-to-date one. In addition, I also found out that the texture loader was deprecated and I had to update that as well. Getting the right effects that I wanted the scene to have required quite a bit of time of adjusting variables and figuring how every fitted together. I used separate functions in my class to cut up the particle system into little chunks, so I could uderstand where my errors were coming from. When I finally got a particle system to work, I had to come up with a modification to the particle system for the other objects (clouds, fireworks)... However, I got a hang of understanding the particle system and its implementation after a couple tries at implementing it.
##What I wish I had done differently:
I think that having brightness based off of fake colors and textures is not a good way to code scenes. I should have used lighting in order to light up the fireworks inside of modifying the colors in order to make the firework appear bright. In addition, I could have written some shader programs for practice and could use them for lighting. Overall, I'm pretty happy with what I coded.
##What I wish we had done differently:
I think that we should have been given a bigger tutorial on THREE.js. Introduction to shapes, particle systems, simple shaders could have given students (especially those without graphics background) a better grasp of THREE.js and the graphics pipeline. The THREE.js documentation is okay, but most of the time, I just looked at examples provided by the THREE.js website. Some of the components could be better explained. However, I think it is fine with just throwing students into THREE.js without much background in order to make the students better prepared for future (more difficult) projects and to give students some experience with writing code on their own.