chaz303 / three.js-tech-talk

       

Dive into VR with WebGL & Three.js

Thank you for your interest in my tech talk.

Here is the video of the tech talk on YouTube:

Click here.

How to download and install my Three.js sandbox:

My Three.js sandbox, used during my talk to demonstrate features of Three.js, can be found here. In order to use the sandbox yourself, please follow these instructions.

Enter the following commands:

• git clone https://github.com/chaz303/three.js-tech-talk.git
• cd ./three.js-tech-talk/Sandbox/
• sudo npm install http-server -g
• http-server -c-1

Once the server is running:

• Click on this link (http://localhost:8080) for the original sandbox.

• When the page has loaded: press the 'h' key for help.

• Click on this link (http://localhost:8080/index_2.html) for the experimental sandbox.

• When the page has loaded: press the 'h' key for help.

Original Sandbox Screenshots:

Experimental Sandbox Screenshots:

Here is the code along:

The files needed for the code along can be found here code along folder. You can download these files individually and open them with a browser manually, or you can use the following command-line instructions.

Enter the following commands:

• git clone https://github.com/chaz303/three.js-tech-talk.git
• cd ./three.js-tech-talk/Code\ Along/
• google-chrome ./index-1.html (for Chrome Browser)

Note: pages (intentionally) appear blank except for index-5.html and index-6.html

Code Along Screenshot (index_5.html):

Additional Resources:

Shader Demos

• Shader Toy
• GLSL Sandbox

Shader Tutorials

• Pixel Shaders
• Intro to WebGL and Shaders
• Using Shaders in the Browser with WebGL
• Three.js Part 5: Shaders

Wagner Effects Composer

Check out Wagner Effects Composer,

Wagner demonstration videos:

• Wagner example: DOF + Bloom + Dirty lenses
• Wagner example: Screen-Space Cross-Hatching

Normalization Maps

Generate a normalization map from an image with Normal Map Online.

Other Useful Links

• createAnimationFrame()

Created by

Chaz Wilson

Facebook GitHub LinkedIn

License

This project is licensed under the MIT License

Acknowledgements

• threejs.org was an invaluable resource for preparing my presentation. My code along is largely based on the
• Diving In: THREE.js by CJ Gammon helped me get started with Three.js and influenced the structure of my presentation.
• JSChannel 2015 - Webgl and Threejs by Joe Pettersson