WEBGL and createGraphics

The 3rd Dimension

The 3rd Dimension - Overview

WebGL Coordinate System

Understanding the different 3D coordinate system
Working with Textures

Apply different textures to 3d primitives
Using createGraphics as a Texture

Basics of applying createGraphics to separating out rendering

What is WEBGL mode

WebGL is a JavaScript API for rendering interactive 3D and 2D graphics and essentially allows compatible browsers to access powerful hardware such as graphics cards of the computer to perform fast real-time rendering.

To configure your P5.js sketch to use the WebGL renderer, add at the end of the createCanvas function is the renderer attribute, we haven’t had to set this when using 2D rendering as that is the default. There are two rendering modes, P2D and WebGL, we will be using the WebGL Renderer today.

createCanvas(width, height, [renderer])

Key differences when working with WEBGL renderer

New 3D Primitives

This renderer gives us access to all to new basic shapes we can use as building blocks for our designs. Which you can check out here.

New Coordinate System

3D in P5.js changes the way coordinates are calculated on the canvas and changes the way fills are rendered to the screen. The canvas renders from the center of the screen instead of rendering from the top left-hand corner and down. For example when using translate on a standard canvas in P5.js translate(500,500) will move the origin point 500 pixels on the x and y-axis right and down respectively. In WEBGL we are translating from directly in the middle of the camera we need three parameters to represent all dimensions.

Materials

WEBGL mode deals with colors slightly differently when we are trying to apply colors to our 3D shapes, we need to use materials. All of these materials behave with light differently. Check them out here.

Lighting

A new consideration when chosing colors for a scene; pointLights, directionalLights and ambientLights have a direct impact on your chosen color pallet.

Grid System in WEBGL

When working in the WEBGL renderer the way coordinates are drawn to screen changes. Not only do we have to account for three dimensions instead of two but we also have to work with a new origin point of our canvas. The center of the canvas is now the origin point.


              function setup() {
                createCanvas(windowWidth, windowHeight, WEBGL);
              }

              function draw() {
                background(245);

                // Ambient lighting for the 3D scene
                ambientLight(255);

                // Notice how this translate applies from the middle
                translate(mouseX, mouseY, 0);

                // In 3D we have to specify the axis of rotation
                rotateX(millis() / 1000);
                rotateY(millis() / 800);

                // this is how we allocate fill to 3D primitives
                normalMaterial();

                // 3D primitive
                box(150);
              }

Ambient Materials

This is the basic sytanx when working with 3D shapes. Note that the same trait of applying style values downwards applies as well with materials of any kind.


              function setup() {
                createCanvas(windowWidth, windowHeight, WEBGL);
                angleMode(DEGREES);
              }

              function draw() {
                background(245);

                // Allows us to navigate with the camera
                orbitControl(5,5);

                // Ambient lighting for the 3D scene
                // This is a requrement when working with
                // Ambient materials
                ambientLight(255);

                // noStroke works in WEBGL
                // noStroke()
                // this is how we allocate fill to 3D primitives
                ambientMaterial(255, 100, 100);

                // Our new 3D primitive
                box(150);
              }

Intro To 3D Challenge

Here

Cube of Cubes Challenge

Here

Applying Texture

You can apply most media types as textures in WEBGL mode. In other words anything that is rendered to screen using the image funciton can be drawn to screen


              let img;

              function preload() {
                img = loadImage('https://source.unsplash.com/400x400/?dog');
              }

              function setup() {
                createCanvas(windowWidth, windowHeight, WEBGL);
              }

              function draw() {
                background(0);
                orbitControl(5,5);

                // Lights all objects in scene
                ambientLight(255);

                // Apply our texture here
                // It behaves similarly to fill
                texture(img);
                box(200);
              }

Applying textures and lighting together

In this example, there are two spheres one inside the other. The larger sphere has a semi transparent texture of clouds and the smaller one has an image of the earth as a texture. This in conjunction with directional lighting to look like the sun we have a fair representation of the earth with low code complexity. Creating this sketch is the next challenge.

Textures and Lights in WebGL Challenge

Here

Basic Application of createGraphics


              let graphics;
              function setup() {
                createCanvas(windowWidth, windowHeight);
                // Here we create a new renderer and allocate a width and height
                graphics = createGraphics(500, 500);
              }

              function draw() {
                background(230);

                // Here we use the dot sytax to ask what is the height of the
                // Off screen renderer
                for (let i = 0; i < graphics.height; i++) {
                  // Again here we ask for the height 
                  let colorChanging=map(i, 0, graphics.height, 255, 0); 
                  // When we want to draw anything to this renderer we need 
                  // to use the dot sytax to apply it to it 
                  graphics.stroke(colorChanging, 100, 200);
                  graphics.line(0, i, width, i);
                }
                // We use to image function to display it on canvas 
                // without this it wouldn't appear on screen 
                image(graphics, mouseX, mouseY); 
              }

Applying createGraphics as a Texture


              let graphics;
              function setup() {
                createCanvas(windowWidth, windowHeight, WEBGL);
                // Here we create a new renderer and allocate a width and height
                graphics = createGraphics(250,250);
              }

              function draw() {
                background(230);
                for (let i = 0; i < graphics.height; i++) {
                  let colorChanging=map(i, 0, graphics.height, 255, 0);
                  graphics.stroke(colorChanging, 100, 200); 
                  graphics.line(0, i, width, i); 
                } 
                rotateX(millis() / 1000);
                rotateY(millis() / 800); 
                // Here we apply this ofscreen rendering as a texture for our plane 
                texture(graphics);
                plane(250,250); 
              }

Custom Textures in WebGL Challenge

Here

The 3rd Dimension