Rendering to a canvas and using it as a texture

In this section, we will look at two different examples. First, we will look at how you can use the canvas to create a simple texture and apply it to a mesh; after that, we’ll go one step further and create a canvas that can be used as a bump map, using a randomly generated pattern.

Using the canvas as a color map

In this first example, we’ll render a fractal to an HTML Canvas element and use that as a color map for our mesh. The following screenshot shows this example (texture-canvas-as-color-map.html):

Figure 10.29 – Using an HTML canvas as a texture

First, we’ll look at the code required to render the fractal:

import Mandelbrot from 'mandelbrot-canvas'
...
const div = document.createElement('div')
div.id = 'mandelbrot'
div.style = 'position: absolute'
document.body.append(div)
const mandelbrot = new Mandelbrot(document.getElementById...