WebGL post-processor

Get Started. It's Free
or sign up with your email address
Rocket clouds
WebGL post-processor by Mind Map: WebGL post-processor

1. Programming resources

1.1. Study materials

1.1.1. WebGL Specification and manual http://www.khronos.org/webgl/ Tony Parisi http://www.slideshare.net/auradeluxe/webgl-for-game-development http://www.slideshare.net/auradeluxe/web-gl-its-go-time# http://www.slideshare.net/auradeluxe/an-introduction-to-webgl-sfhtml5-talk-january-2014 WebGL for Dummies http://webglfordummies.blogspot.de/ Learning WebGL http://learningwebgl.com/blog/ WebGL Fundamentals http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/ Google Developers https://www.youtube.com/user/GoogleDevelopers/search?query=webgl

1.1.2. Three.js AeroTwist http://aerotwist.com/tutorials/getting-started-with-three-js/ Branger Briz study environment http://threejsplaygnd.brangerbriz.net/ http://threejs.org/ Mr Doob https://github.com/mrdoob Learning ThreeJS https://github.com/josdirksen/learning-threejs JSfiddle for interactive coding Example

1.1.3. Other High-performance WebGL apps with LLJS and asm.js http://jlongster.github.io/cascadiajs-2013/#/

1.2. Examples

1.2.1. WebGL 30 examples http://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954 Volvo http://www.volvooceanrace.com/en/3d-race-viewer.html http://www.volvooceanrace.com/static/assets/content/media/files/m17791_volvo_3d_ocean_race_viewer.pdf StackOverflow http://stackoverflow.com/questions/tagged/webgl Google Body Browser http://www.zygotebody.com/ Evan Wallace Water and Sphere David Waves

1.2.2. Three.js Many examples http://alteredqualia.com/

1.2.3. Other GPU height field, coupling, dynamic effects Skeel Lee

2. Relevant physics

2.1. Ship

2.1.1. Hull model format: IGS or STL

2.1.2. Superstructure model

2.1.3. Movement 6DOF

2.2. Water

2.2.1. Wave spectrums Pierson–Moskowitz A model for fully developed wind seas Application 1 Application 2 Phillips Used in existing Unity applications

2.2.2. Optics Color filtering Scattering Causes blurring Ocean lighting with BRDF http://www-ljk.imag.fr/Publications/Basilic/[email protected]_1ac3379/article.pdf Caustics Ray tracing Sunbeams (godrays)

2.2.3. Other effects Splashes Spray Wakes Kelvin wakes Whitecaps Simple - additional layer based on turbulence.

2.3. Seakeeping

2.3.1. RAO SHR2 format SHR2 to ASCII by Python or C++ ...it's not likely we'll be able to run C++ from a website in a browser simply because the security risks are too high. The only exception that I'm aware of is Google's Native Client, which allows you to run C++ in a browser. However, Chrome is the only browser that will support it and I'm not sure if you can use it in conjunction with WebGL. I would not be surprised if this approach takes off in a year or two. (2010)

3. Tools

3.1. 3D API /engine / library

3.1.1. WebGL ASM.js Highly optimised Better performance Unreal 3 engine was ported to ASM Emscripten for C++ implementation http://arstechnica.com/information-technology/2013/05/native-level-performance-on-the-web-a-brief-examination-of-asm-js/ 70% native speed Three.js 10...30% native speed Front end http://www.radiatedpixel.com/wordpress/2013/03/27/webgl-3d-model-viewer-using-three-js/ http://stackoverflow.com/questions/12880980/need-js-and-html-example-for-displaying-stl-3d-objects-in-a-web-page Example The good The best tested 3D API Best documented 3D API It is extensible Simplest 3D API The bad Limited by Javascript Young technology Needs an engine/library for productivity

3.1.2. Unity Game engine ports use Emscripten and asm.js to cross-compile C++ to JS Resources http://scrawkblog.com/category/water/ Ship trails http://answers.unity3d.com/questions/16123/ship-trail-on-water.html http://blogs.unity3d.com/2014/04/29/on-the-future-of-web-publishing-in-unity/ White caps http://scrawkblog.com/2013/08/22/ocean-white-caps-in-unity/ BRDF lighting http://scrawkblog.com/2013/06/04/ocean-with-brdf-lighting-in-unity/ The good Influential collaborators WebGL port coming in a couple of months Lots of available addons The bad Ocean to WebGL export unknown Results in 10MB+ of JS

3.1.3. Discarded OpenGL ES Doesn't run on Desktops Runs on a lot of mobiles Doesn't run on the web Direct3D Doesn't run on the web Doesn't run on mobiles. Doesn't run on Apple Flash Stage 3D Poorly documented language Does not integrate with any of the web technologies Silverlight 3D Doesn't run on mobile Poortly documented Needs a plugin OpenGL Serious driver issues Doesn't run on the web Doesn't run on mobiles

3.2. Blender

3.2.1. Ocean modifier http://wiki.unity3d.com/index.php/Ocean https://www.youtube.com/watch?v=hmfTCe1KDzw https://www.youtube.com/watch?v=roGu_xOXjUk https://www.youtube.com/watch?v=sfi7HW8qHAo http://wiki.blender.org/index.php/Doc:2.6/Manual/Modifiers/Simulate/Ocean https://www.youtube.com/watch?v=tojD1kzr3Ro https://www.youtube.com/watch?v=11F1NRpqrzY

3.2.2. https://www.youtube.com/watch?v=wklRKGC7ai8

3.2.3. Import/Export https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

3.2.4. Blender Game Engine http://en.wikipedia.org/wiki/Blender_Game_Engine Bullet physics engine http://en.wikipedia.org/wiki/Bullet_(software) http://blenderartists.org/forum/showthread.php?241891-Important-threads-and-FAQs

3.2.5. Blend4Web WebGL port http://www.blend4web.com/en/ http://wiki.blender.org/index.php/Extensions:2.6/Py/Scripts/Import-Export/Blend4Web http://blenderartists.org/forum/showthread.php?333214-Blend4Web-a-3D-web-framework-for-Blender-artists

3.2.6. Blender to WebGL https://www.youtube.com/watch?v=JqmjK-4jh8M

3.3. Discarded

3.3.1. Sesam

3.3.2. Wavefront

3.3.3. Blender3D Creating animated films, visual effects, art, video games Free Has Three.js export Can we export the ocean modifier? Exports to ASCII JSON Blender to WebGL http://quaintproject.wordpress.com/2014/01/22/exporting-from-blender-to-web-gl-using-collada-and-three-js-part-1/ Can the ocean modifier be changed to use a real wave spectrum?

3.3.4. Paraview Specialized for experimental data presentation Subpar graphics

3.3.5. CopperLicht Commercial grade WebGL 3D engine with editor http://www.ambiera.com/copperlicht/

3.3.6. Maya/3DS Max/Rhinoceros 3D animation, modeling, simulation, rendering, and compositing software Expensive

4. 3D model formats

4.1. Formats I will be using

4.1.1. Input from Analysis IGS Some hull models STL Some hull models STL-to-Blender-to-OBJ-to-Unity

4.1.2. Intermediate format OBJ Wavefront OBJ to JSON converter Mr Doob script Stack Overflow thread

4.1.3. Output to WebGL JSON Supported in Three.js Blender exporter OBJ file converter (Python) https://github.com/mrdoob/three.js/wiki/JSON-Geometry-format-4 http://stackoverflow.com/questions/11243689/prefered-3d-model-format-of-three-js

4.2. Other formats

4.2.1. PLY PLY to JSON? Eirik model extended OBJ

4.2.2. COLLADA Supported by WebGL, Blender, Unreal and much more http://en.wikipedia.org/wiki/COLLADA Perfornace hog Since Collada is not a delivery format, it’s not well suited for web applications. We can load DAE files directly into Three.js, but in order to save bandwidth and reduce loading times, it’s preferable to convert them to Three.js native JSON format.

5. Goal: Create post-processing for advanced sea-keeping analyses. Generate model with wave transparency, colors, lighting, viewpoints, etc.