PHASE 3: Production Process - Floor Projection Mapping Design Iteration

Design Iteration

My initial water ripples need to be visible more when users step around. Thus, I tried another way of doing it by using a shader graph and particle system following the tutorial. However, I have encountered a lot of problems during design iteration. The water shader seems doesn't work under Universal Pipeline Renderer for the first tutorial.

Multiple Failure and Experimentations




By following the tutorial, I still couldn't identify how the shader works. After exploring, there is a component call RenderTexture for the camera to render the texture of the particles through code. At the same time, I revamp the whole project and use a different sensor called HOKUYO instead of LIDAR sensor. During the testing and experimentations, I use TUIO Simulator to code the content of the project. This method is faster as I don't have to setup the project using LIDAR.


Example screenshot of the TUIO Simulator. The simulator act as the user. It's easier for future content development.


Hokuyo Sensor used which could detect approximately 10m. Download URGBenri Plus and connect with the serial port 192.168.1.10 (10940)

Water Shader




After weeks of experimenting, the shader seems to work, but there are still much more to improve. There are some problems dealing with the camera of the scene. When it is switched to orthographic mode, the camera couldn't render the visuals as it is. To solve the problem, I have added different cameras for specific elements. For instance, one camera to render the flowers, another for the ripples and etc. This can be done by selecting or deselecting the elements under culling mask. 

I have also improved the technical part by adding a circles with 5 joints around the user and spawn the flowers on the joints randomly. This is to avoid the flowers to spawn rapidly and knock on each other.

Outcome


The technical part seems to work at the moment. The flowers and water ripples spawn whenever the user is detected. The next step will be improvising the layout and visuals of ripples, flowers and water shader.


Visuals of Flowers



The previous visuals of flowers look more 2D and vector style.Thus, I have tried using shader graph in for the flowers. I play around with lighting to shine on the flowers. However, the flowers have clay-looking look and the colors are so dull.



I have came across the knowledge of uv mapping in blender. I photoshop the emission map and base textures and map on the petals. These are the few experimentations that I've done with different textures and emission maps. In my opinion, the last visual has the most potential space to improve.

Experimentations in Blender





The visuals look appealing with contradicting color variations. However, there are some issues when exporting the map to unity. This is because both of the render engines are different, thus it looks nicer in blender rather than unity. I have to further experiment in unity based on this direction.


Experimentations in Unity



Using the same method, I play around with base texture, base color, and emission map on the petals. Based on my judgment, I have chosen light orange and light purplish blue flowers as they stands out more on the water. Also, both are complementary colors that create higher contrast and look more appealing.


Visuals of Water Lilies Pad


The water shader will create water foam when 3D objects are immersed in the water. My previous water lilies pad are designed in 2D. I have modelled it to 3D with different shapes to integrate with the water shader. I also added textures and emission map when exporting to unity to make it more lively.

Annotated Bibliography

  • Dorya Tutorial. (2022) Water Lily Pond – Blender Tutorial with Commentary – Modeling Shading and Animation. Aug 18. Youtube. Available at: LINK

I have followed the tutorial to create different kinds of water lilies pads. The tutorial is helpful for me to create my own stylized water lilies pad. 

  • Minions Art. (2019) Shader Graph Interactive Water(with Refraction/Grabpass, Intersection/Foam lines). Oct 6. Patreon. Available at: LINK
I have followed the tutorial to create the water shader. The glowy effect of the water ripples could help to stand out the interaction of the project. However, there are some bugs to fix for the shader graph so that it is compatible with my layout. 





  • Rose petals. (n.d) Google Image. Available at: LINK

I have applied the texture of the petals and added as emission map & base color map in unity for the shading.


References

  • Fluorescent Flowers. (n.d) Pinterest. Available at: LINK
  • My Modern Met. (n.d) Ultraviolet Photography Reveals the Unexpected Fluorescence of Flowers. Pinterest. Available at: LINK
  • Mommy Poppins. (n.d). Hottest New NYC Destinations for Kids That Opened in 2017 | Mommy Poppins - Things to Do with Kids. Pinterest. Available at: LINK
  • Raindrops and Roses: Photo. (n.d) Pinterest. Available at: LINK

Comments

Popular posts from this blog

[Interaction 1] Flower-Blooming Mechanism Development Challenges

Final Prototype: Night-Blooming Flowers Physical Light Installation