Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By : Jos Dirksen
Book Image

Learning Three.js - the JavaScript 3D Library for WebGL

By: Jos Dirksen

Overview of this book

Related Content you might be interested in

Current Title:

Small book image
Learning Three.js - the JavaScript 3D Library for WebGL
Jos Dirksen
Mar, 2015 | 422 pages
No titles found
Table of Contents (20 chapters)
Learning Three.js – the JavaScript 3D Library for WebGL Second Edition
Learning Three.js – the JavaScript 3D Library for WebGL Second Edition
Credits
Credits
About the Author
About the Author
Acknowledgments
Acknowledgments
About the Reviewers
About the Reviewers
www.PacktPub.com
www.PacktPub.com
Preface
Preface
Free Chapter
1
Creating Your First 3D Scene with Three.js
Creating Your First 3D Scene with Three.js
Requirements to use Three.js
Getting the source code
Creating the HTML skeleton
Rendering and viewing a 3D object
Adding materials, lights, and shadows
Expanding your first scene with animations
Using dat.GUI to make experimenting easier
Automatically resize the output when browser size changes
Summary
2
Basic Components That Make Up a Three.js Scene
Basic Components That Make Up a Three.js Scene
Creating a scene
Geometries and meshes
Different cameras for different uses
Summary
3
Working with the Different Light Sources Available in Three.js
Working with the Different Light Sources Available in Three.js
Different kinds of lighting provided by Three.js
Basic lights
Special lights
Summary
4
Working with Three.js Materials
Working with Three.js Materials
Understanding common material properties
Starting with a simple mesh
Advanced materials
Materials you can use for a line geometry
Summary
5
Learning to Work with Geometries
Learning to Work with Geometries
The basic geometries provided by Three.js
Summary
6
Advanced Geometries and Binary Operations
Advanced Geometries and Binary Operations
THREE.ConvexGeometry
THREE.LatheGeometry
Creating 3D text
Using binary operations to combine meshes
Summary
7
Particles, Sprites, and the Point Cloud
Particles, Sprites, and the Point Cloud
Understanding particles
Particles, THREE.PointCloud, and THREE.PointCloudMaterial
Styling particles with the HTML5 canvas
Using textures to style particles
Working with sprite maps
Creating THREE.PointCloud from an advanced geometry
Summary
8
Creating and Loading Advanced Meshes and Geometries
Creating and Loading Advanced Meshes and Geometries
Geometry grouping and merging
Summary
9
Animations and Moving the Camera
Animations and Moving the Camera
Basic animations
Working with the camera
Morphing and skeletal animation
Creating animations using external models
Summary
10
Loading and Working with Textures
Loading and Working with Textures
Using textures in materials
Advanced usage of textures
Summary
11
Custom Shaders and Render Postprocessing
Custom Shaders and Render Postprocessing
Setting up Three.js for postprocessing
Postprocessing passes
Creating custom postprocessing shaders
Summary
12
Adding Physics and Sounds to Your Scene
Adding Physics and Sounds to Your Scene
Creating a basic Three.js scene
Material properties
Basic supported shapes
Using constraints to limit movement of objects
Summary
Index
Index

Chapter 11. Custom Shaders and Render Postprocessing

We're getting to the end of the book, and in this chapter, we'll look at the one main feature of Three.js we haven't touched upon: render postprocessing. Besides that, in this chapter, we'll also introduce you to how you can create custom shaders. The main points we'll discuss in this chapter are the following:

  • Setting up Three.js for postprocessing

  • Discussing the basic postprocessing passes provided by Three.js, such as THREE.BloomPass and THREE.FilmPass

  • Applying effects to part of the scene using masks

  • Using THREE.TexturePass to store rendering results

  • Using THREE.ShaderPass to add even more basic postprocessing effects, such as sepia filters, mirror effects, and color adjustments

  • Using THREE.ShaderPass for various blurring effects and more advanced filters

  • Creating a custom postprocessing effect by writing a simple shader

In the Introducing requestAnimationFrame section of Chapter 1, Creating Your First 3D Scene with Three.js, we set up a...

Previous Section
End of Section 1
Next Section