Awesome

WebFX - online TressFX model viewer (Demo - Chrome recommended, see FAQ below)

This is a web viewer for .tfx AMD TressFX hair/fur file format. It also features a lot of modern rendering effects, so be sure to check out the code!

What is this?

A few months ago I've ported AMD's TressFX hair rendering/simulation library to OpenGL. Turns out that WebGL 2.0 offers enough capabilities to display .tfx file in the browser. This, combined with some modern rendering techniques like SSSSS, PBR, HDR makes for quite interesting demo project.

Use the [W, S, A, D] keys to move and [Z, SPACEBAR] to fly up or down. Click and drag to rotate the camera (be careful around the UI). All materials, effects and rendering techniques are configurable using the UI on the right side of the screen.

Usage

1. yarn install
2. yarn start <- dev server
3. go to localhost:9000

Alternatively, yarn build for production build, outputs will be in dist folder.

FAQ

Q: Which effects are implemented?

• TressFX model loading - only simple rendering, no PPLL, alpha, simulation or other techniques
• Kajiya-Kay hair shading (with small custom modifications) Kajiya89, Scheuermann04
• PBR materials (small modifications to AO term to highlight details like collarbones, similar to micro shadow hack in Uncharted4) Burley12, Karis13, Lagarde+2014, in OpenGL
  • Cook-Torrance model
  • Diffuse: Lambert
  • F Fresnel term: Schlick
  • D Normal distribution function: GGX
  • G Self-shadowing: GGX-Smith
• SSSSS - both forward scattering (remember Nathan Drake in Uncharted 4?) and the blur. Jimenez+15 with github
• Shadow Mapping - both Percentage Closer Filter (PCF) and Percentage-Closer Soft Shadows (PCSS)
• HDR + Tonemapping (just please use ACES) UE4 docs, UE4 Feature Highlight video, Wronski16, Hable10, Nvidia - preparing for real HDR
• Color Grading - based closely on Unreal Engine 4 implementation. UE4 docs, Fry17, Hable17
• GPU dithering - 8x8 Bayer matrix dithering
• SSAO - John Chapman's blog post, in OpenGL
• FXAA - Lottes2009
• MSAA - ok, it's actually just render target upscaling
• Entity component system (ECS) - actually, just a typescript exercise. No need for optimizations and complex data management in demo as simple as this

Q: What to do if it does not work?

This demo uses a lot of different rendering techniques and sometimes WebGL does not keep up. If the scene renders incorrectly (e.g. no hair on firefox) there is nothing I can do. Baseline is support for WebGL 2.0, which has 55% adoption rate. All we really need are features like:

• texture sampling in vertex shader,
• multiple render targets (it was possible in WebGl 1.0, but I'd rather have full support),
• texelFetch,
• more flexible texture formats,
• non power of 2 textures,
• better depth textures,
• for-loops in shaders,
• build-in gl_VertexID and gl_InstanceID.

See also last question about my hardware config.

Q: Shadow controls stopped working?

This sometimes happens, but I don't think it's related to my code. For some reason, shadow depth map is rendered incorrectly/does not update. Checking 'Show dbg' in 'Shadow' section on UI fixes the problem (even though all it does is renders debug view on top of final image). BTW. debug depth map on the right is for SSSSS.

Q: How can I improve performance?

Uncheck Use MSAA. You can also play with SSAO settings, but the gains are limited. I did not focus much on performance, works 60fps for me (unless super close-up).

Q: That's a lot of code

Most of the code comes from other project I'm working on. Interesting snippets:

• main.ts, see renderScene() function
• global resources
• render passes
• shaders
• Tfx file loader, also Tfx header parser
• ECS and Component

Q: Why Sintel?

If You know me, You probably know why I like Sintel so much.

Q: Your PC?

GTX 1050 Ti, Driver 398.36, Windows 10, Chrome 74.0.3729.13

Honorable mentions and other 3rd party stuff

• AMD for TressFX
• dat.gui
• stats.js
• gl-mat4 and other gl-* math libs
• lodash
• typescript <3
• webpack
• Blender, Blender Institute <3 Sintel's model under CC 3.0, character was simplified into bust. © copyright Blender Foundation | durian.blender.org