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

1.1.1.1. Specification and manual

1.1.1.1.1. http://www.khronos.org/webgl/

1.1.1.2. Tony Parisi

1.1.1.2.1. http://www.slideshare.net/auradeluxe/webgl-for-game-development

1.1.1.2.2. http://www.slideshare.net/auradeluxe/web-gl-its-go-time#

1.1.1.2.3. http://www.slideshare.net/auradeluxe/an-introduction-to-webgl-sfhtml5-talk-january-2014

1.1.1.3. WebGL for Dummies

1.1.1.3.1. http://webglfordummies.blogspot.de/

1.1.1.4. Learning WebGL

1.1.1.4.1. http://learningwebgl.com/blog/

1.1.1.5. WebGL Fundamentals

1.1.1.5.1. http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/

1.1.1.6. Google Developers

1.1.1.6.1. https://www.youtube.com/user/GoogleDevelopers/search?query=webgl

1.1.2. Three.js

1.1.2.1. AeroTwist

1.1.2.1.1. http://aerotwist.com/tutorials/getting-started-with-three-js/

1.1.2.2. Branger Briz study environment

1.1.2.2.1. http://threejsplaygnd.brangerbriz.net/

1.1.2.3. http://threejs.org/

1.1.2.4. Mr Doob

1.1.2.4.1. https://github.com/mrdoob

1.1.2.5. Learning ThreeJS

1.1.2.5.1. https://github.com/josdirksen/learning-threejs

1.1.2.6. JSfiddle for interactive coding

1.1.2.6.1. Example

1.1.3. Other

1.1.3.1. High-performance WebGL apps with LLJS and asm.js

1.1.3.1.1. http://jlongster.github.io/cascadiajs-2013/#/

1.2. Examples

1.2.1. WebGL

1.2.1.1. 30 examples

1.2.1.1.1. http://www.creativebloq.com/3d/30-amazing-examples-webgl-action-6142954

1.2.1.2. Volvo

1.2.1.2.1. http://www.volvooceanrace.com/en/3d-race-viewer.html

1.2.1.2.2. http://www.volvooceanrace.com/static/assets/content/media/files/m17791_volvo_3d_ocean_race_viewer.pdf

1.2.1.3. StackOverflow

1.2.1.3.1. http://stackoverflow.com/questions/tagged/webgl

1.2.1.4. Google Body Browser

1.2.1.4.1. http://www.zygotebody.com/

1.2.1.5. Evan Wallace

1.2.1.5.1. Water and Sphere

1.2.1.6. David

1.2.1.6.1. Waves

1.2.2. Three.js

1.2.2.1. Many examples

1.2.2.1.1. http://alteredqualia.com/

1.2.3. Other

1.2.3.1. GPU height field, coupling, dynamic effects

1.2.3.1.1. Skeel Lee

2. Relevant physics

2.1. Ship

2.1.1. Hull model

2.1.1.1. format: IGS or STL

2.1.2. Superstructure model

2.1.3. Movement 6DOF

2.2. Water

2.2.1. Wave spectrums

2.2.1.1. Pierson–Moskowitz

2.2.1.1.1. A model for fully developed wind seas

2.2.1.1.2. Application 1

2.2.1.1.3. Application 2

2.2.1.2. Phillips

2.2.1.2.1. Used in existing Unity applications

2.2.2. Optics

2.2.2.1. Color filtering

2.2.2.2. Scattering

2.2.2.2.1. Causes blurring

2.2.2.3. Ocean lighting with BRDF

2.2.2.3.1. http://www-ljk.imag.fr/Publications/Basilic/[email protected]_1ac3379/article.pdf

2.2.2.4. Caustics

2.2.2.4.1. Ray tracing

2.2.2.5. Sunbeams (godrays)

2.2.3. Other effects

2.2.3.1. Splashes

2.2.3.2. Spray

2.2.3.3. Wakes

2.2.3.3.1. Kelvin wakes

2.2.3.4. Whitecaps

2.2.3.4.1. Simple - additional layer based on turbulence.

2.3. Seakeeping

2.3.1. RAO

2.3.1.1. SHR2 format

2.3.1.2. SHR2 to ASCII by Python or C++

2.3.1.2.1. ...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.

2.3.1.2.2. 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

3.1.1.1. ASM.js

3.1.1.1.1. Highly optimised

3.1.1.1.2. Better performance

3.1.1.1.3. Unreal 3 engine was ported to ASM

3.1.1.1.4. Emscripten for C++ implementation

3.1.1.1.5. http://arstechnica.com/information-technology/2013/05/native-level-performance-on-the-web-a-brief-examination-of-asm-js/

3.1.1.1.6. 70% native speed

3.1.1.2. Three.js

3.1.1.2.1. 10...30% native speed

3.1.1.3. Front end

3.1.1.3.1. http://www.radiatedpixel.com/wordpress/2013/03/27/webgl-3d-model-viewer-using-three-js/

3.1.1.3.2. http://stackoverflow.com/questions/12880980/need-js-and-html-example-for-displaying-stl-3d-objects-in-a-web-page

3.1.1.3.3. Example

3.1.1.4. The good

3.1.1.4.1. The best tested 3D API

3.1.1.4.2. Best documented 3D API

3.1.1.4.3. It is extensible

3.1.1.4.4. Simplest 3D API

3.1.1.5. The bad

3.1.1.5.1. Limited by Javascript

3.1.1.5.2. Young technology

3.1.1.5.3. Needs an engine/library for productivity

3.1.2. Unity

3.1.2.1. Game engine ports use Emscripten and asm.js to cross-compile C++ to JS

3.1.2.2. Resources

3.1.2.2.1. http://scrawkblog.com/category/water/

3.1.2.3. Ship trails

3.1.2.3.1. http://answers.unity3d.com/questions/16123/ship-trail-on-water.html

3.1.2.4. http://blogs.unity3d.com/2014/04/29/on-the-future-of-web-publishing-in-unity/

3.1.2.5. White caps

3.1.2.5.1. http://scrawkblog.com/2013/08/22/ocean-white-caps-in-unity/

3.1.2.6. BRDF lighting

3.1.2.6.1. http://scrawkblog.com/2013/06/04/ocean-with-brdf-lighting-in-unity/

3.1.2.7. The good

3.1.2.7.1. Influential collaborators

3.1.2.7.2. WebGL port coming in a couple of months

3.1.2.7.3. Lots of available addons

3.1.2.8. The bad

3.1.2.8.1. Ocean to WebGL export unknown

3.1.2.8.2. Results in 10MB+ of JS

3.1.3. Discarded

3.1.3.1. OpenGL ES

3.1.3.1.1. Doesn't run on Desktops

3.1.3.1.2. Runs on a lot of mobiles

3.1.3.1.3. Doesn't run on the web

3.1.3.2. Direct3D

3.1.3.2.1. Doesn't run on the web

3.1.3.2.2. Doesn't run on mobiles.

3.1.3.2.3. Doesn't run on Apple

3.1.3.3. Flash Stage 3D

3.1.3.3.1. Poorly documented language

3.1.3.3.2. Does not integrate with any of the web technologies

3.1.3.4. Silverlight 3D

3.1.3.4.1. Doesn't run on mobile

3.1.3.4.2. Poortly documented

3.1.3.4.3. Needs a plugin

3.1.3.5. OpenGL

3.1.3.5.1. Serious driver issues

3.1.3.5.2. Doesn't run on the web

3.1.3.5.3. Doesn't run on mobiles

3.2. Blender

3.2.1. Ocean modifier

3.2.1.1. http://wiki.unity3d.com/index.php/Ocean

3.2.1.2. https://www.youtube.com/watch?v=hmfTCe1KDzw

3.2.1.3. https://www.youtube.com/watch?v=roGu_xOXjUk

3.2.1.4. https://www.youtube.com/watch?v=sfi7HW8qHAo

3.2.1.5. http://wiki.blender.org/index.php/Doc:2.6/Manual/Modifiers/Simulate/Ocean

3.2.1.6. https://www.youtube.com/watch?v=tojD1kzr3Ro

3.2.1.7. https://www.youtube.com/watch?v=11F1NRpqrzY

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

3.2.3. Import/Export

3.2.3.1. https://github.com/mrdoob/three.js/tree/master/utils/exporters/blender

3.2.4. Blender Game Engine

3.2.4.1. http://en.wikipedia.org/wiki/Blender_Game_Engine

3.2.4.2. Bullet physics engine

3.2.4.2.1. http://en.wikipedia.org/wiki/Bullet_(software)

3.2.4.3. http://blenderartists.org/forum/showthread.php?241891-Important-threads-and-FAQs

3.2.5. Blend4Web WebGL port

3.2.5.1. http://www.blend4web.com/en/

3.2.5.2. http://wiki.blender.org/index.php/Extensions:2.6/Py/Scripts/Import-Export/Blend4Web

3.2.5.3. http://blenderartists.org/forum/showthread.php?333214-Blend4Web-a-3D-web-framework-for-Blender-artists

3.2.6. Blender to WebGL

3.2.6.1. https://www.youtube.com/watch?v=JqmjK-4jh8M

3.3. Discarded

3.3.1. Sesam

3.3.2. Wavefront

3.3.3. Blender3D

3.3.3.1. Creating animated films, visual effects, art, video games

3.3.3.2. Free

3.3.3.3. Has Three.js export

3.3.3.3.1. Can we export the ocean modifier?

3.3.3.3.2. Exports to ASCII JSON

3.3.3.4. Blender to WebGL

3.3.3.4.1. http://quaintproject.wordpress.com/2014/01/22/exporting-from-blender-to-web-gl-using-collada-and-three-js-part-1/

3.3.3.5. Can the ocean modifier be changed to use a real wave spectrum?

3.3.4. Paraview

3.3.4.1. Specialized for experimental data presentation

3.3.4.2. Subpar graphics

3.3.5. CopperLicht

3.3.5.1. Commercial grade WebGL 3D engine with editor

3.3.5.2. http://www.ambiera.com/copperlicht/

3.3.6. Maya/3DS Max/Rhinoceros

3.3.6.1. 3D animation, modeling, simulation, rendering, and compositing software

3.3.6.2. Expensive

4. 3D model formats

4.1. Formats I will be using

4.1.1. Input from Analysis

4.1.1.1. IGS

4.1.1.1.1. Some hull models

4.1.1.2. STL

4.1.1.2.1. Some hull models

4.1.1.2.2. STL-to-Blender-to-OBJ-to-Unity

4.1.2. Intermediate format

4.1.2.1. OBJ

4.1.2.1.1. Wavefront OBJ to JSON converter

4.1.2.1.2. Mr Doob script

4.1.2.1.3. Stack Overflow thread

4.1.3. Output to WebGL

4.1.3.1. JSON

4.1.3.1.1. Supported in Three.js

4.1.3.1.2. Blender exporter

4.1.3.1.3. OBJ file converter (Python)

4.1.3.1.4. https://github.com/mrdoob/three.js/wiki/JSON-Geometry-format-4

4.1.3.1.5. http://stackoverflow.com/questions/11243689/prefered-3d-model-format-of-three-js

4.2. Other formats

4.2.1. PLY

4.2.1.1. PLY to JSON?

4.2.1.2. Eirik model

4.2.1.3. extended OBJ

4.2.2. COLLADA

4.2.2.1. Supported by WebGL, Blender, Unreal and much more

4.2.2.1.1. http://en.wikipedia.org/wiki/COLLADA

4.2.2.2. Perfornace hog

4.2.2.2.1. 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.