3-D PSRDnoise tutorial

Page 1 2 3 4 5 6 7

1: Introduction

This is a tutorial on how to use the 3-d version of "psrdnoise", along with a few general pointers on procedural 3-D texture mapping. The presentation assumes that you have read the tutorial on 2-D psrdnoise. If you have not, please do.

We will use a sphere for all our examples, and we will use the Three.js framework for convenience, which means that the vertex shader will take some default attributes and uniforms from the ShaderMaterial framework of Three.js. Only our final example will actually show the fragmentshader, and we won't clutter the presentation with the code for the noise functions, but everything is in the source code for these pages if you want to have a look.

Use the mouse to rotate this sphere around. The texture is procedural, but it's defined as a 2-D surface map using 2-D texture coordinates. Mapping a 2-D texture onto a sphere with the traditional latitude-longitude mapping causes several problems: there is a texture seam along one longitude, the horizontal scale of the texture varies with latitude, and the texture "pinches" at the poles.

		// Fragment shader code goes here