4 ms·

It doesn't look like water to me. This looks a lot more like water: http://madebyevan.com/webgl-water/ http://madebyevan.com/webgl-water/

milancurcic 8y ago
Because it's not solving for the water surface elevation and velocity, only for light reflection and refraction from a pre-set surface. > The way that the water appear to move comes from slightly altering the point on the refraction and reflection textures that we sample from every frame. > > These slight offsets comes from sampling a du/dv map, which is just a texture that encodes different x and y offsets. The app in the link you posted does indeed look like it's solving at least a shallow water system of equations, and looks very excited to me as a wave physicist.
- nomel 8y ago
  Completely off topic, but this is a very exciting opportunity for me. What do you do as a "wave physicist"?
  - milancurcic 8y ago
    I study the role of waves in the larger meteorological and oceanographic context, specifically (1) how they govern momentum and energy exchange between wind and ocean currents, and (2) how they contribute to Lagrangian surface transport of pollutants, think oil spills or microplastics. You can skim through my papers at https://milancurcic.com/publications https://milancurcic.com/publications. There is also a nice short video where my boss describes what we do in the lab: https://www.youtube.com/watch?v=B6c20IqR2mw https://www.youtube.com/watch?v=B6c20IqR2mw
chinedufn 8y ago
Totally agree that there's room to look more water-y (depending on your application's needs). One thing that can be done is playing around with the numbers / uniforms in the fragment shader to change the look. For many use cases you can get pretty far with that without actually changing the implementation in this demo. If a more physically based level of realism is needed (like the water ripples on click in the demo that you linked) you can use techniques like height simulation based on a wave equation [1]. You'll of course need to balance realism with realtime feasibility - but often times getting a much better look comes down to tweaking some numbers until things look good! [1] - https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch01.html https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch01.ht...
deleted 8y ago
[deleted]
deleted 8y ago
[deleted]
Kagerjay 8y ago
Related note, the creator of that also made figma, which is a webgl + rust + webassembly application for UX design (similar to apple sketch)
- azakai 8y ago
  I believe Figma is C++ + WebGL + WebAssembly on the client, and Rust (and probably others) on the server. https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to... https://www.figma.com/blog/rust-in-production-at-figma/ https://www.figma.com/blog/rust-in-production-at-figma/
beatgammit 8y ago
Wow, I'm floored at how well that worked on my phone. Even the interactions were intuitive.

milancurcic 8y ago

Because it's not solving for the water surface elevation and velocity, only for light reflection and refraction from a pre-set surface. > The way that the water appear to move comes from slightly altering the point on the refraction and reflection textures that we sample from every frame. > > These slight offsets comes from sampling a du/dv map, which is just a texture that encodes different x and y offsets. The app in the link you posted does indeed look like it's solving at least a shallow water system of equations, and looks very excited to me as a wave physicist.

nomel 8y ago
Completely off topic, but this is a very exciting opportunity for me. What do you do as a "wave physicist"?
- milancurcic 8y ago
  I study the role of waves in the larger meteorological and oceanographic context, specifically (1) how they govern momentum and energy exchange between wind and ocean currents, and (2) how they contribute to Lagrangian surface transport of pollutants, think oil spills or microplastics. You can skim through my papers at https://milancurcic.com/publications https://milancurcic.com/publications. There is also a nice short video where my boss describes what we do in the lab: https://www.youtube.com/watch?v=B6c20IqR2mw https://www.youtube.com/watch?v=B6c20IqR2mw

chinedufn 8y ago

Totally agree that there's room to look more water-y (depending on your application's needs). One thing that can be done is playing around with the numbers / uniforms in the fragment shader to change the look. For many use cases you can get pretty far with that without actually changing the implementation in this demo. If a more physically based level of realism is needed (like the water ripples on click in the demo that you linked) you can use techniques like height simulation based on a wave equation [1]. You'll of course need to balance realism with realtime feasibility - but often times getting a much better look comes down to tweaking some numbers until things look good! [1] - https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch01.html https://developer.nvidia.com/gpugems/GPUGems/gpugems_ch01.ht...

deleted 8y ago

[deleted]

deleted 8y ago

[deleted]

Kagerjay 8y ago

Related note, the creator of that also made figma, which is a webgl + rust + webassembly application for UX design (similar to apple sketch)

azakai 8y ago
I believe Figma is C++ + WebGL + WebAssembly on the client, and Rust (and probably others) on the server. https://www.figma.com/blog/building-a-professional-design-tool-on-the-web/ https://www.figma.com/blog/building-a-professional-design-to... https://www.figma.com/blog/rust-in-production-at-figma/ https://www.figma.com/blog/rust-in-production-at-figma/

beatgammit 8y ago

Wow, I'm floored at how well that worked on my phone. Even the interactions were intuitive.