Plane not being lit in scene

Hello,

When I run the code below the plane generated is not being illuminated by any light source in the scene. Can someone take a look? I am not sure why it is not getting lit by the pointLight like the rotating boxes are.

let angle = 0;


function setup() {
  createCanvas(400, 400, WEBGL);
}

function draw() {
  // Initialize the BG color and light source
  background(200);
  pointLight(255, 255, 255, 0, -200, 200);

  // Generate the horizontal row of rotating boxes.
  for (let x = -200; x < 200; x +=50) {
    push();
    translate(x, 0, 0);
    rotateZ(angle);
    rotateX(angle * 0.01);
    rotateY(angle * 0.5);
    noStroke();
    ambientMaterial(255);
    box(25);
    pop();
  }

  // Generate the plane on the bottom of the scene.
  push();
  translate(0, 100);
  rotateX(HALF_PI);
  noStroke();
  ambientMaterial(200);
  plane(350, 350);
  pop();

  //  Rotate the boxes.
  angle += 0.02;
    
}

What the above code generates:

image

1 Like

What I am trying to generate:

image

First guess – this might have to do with the different ways that stroke, fill, alpha and light interact with primitives. Certain combinations can sometimes have surprising results – especially in shapes like spheres, where stokes don’t interact as one might expect.

/**
 * Box Lighting
 * 2018-05-24 Jeremy Douglass - Processing 3.3.6
 * discourse.processing.org/t/plane-not-being-lit-in-scene/310/2
 * based on Sphere Lighting:
 * forum.processing.org/two/discussion/18352/
 **/
 
float sw, sh, sr; // box width, height, radius
float lightX, lightY;
 
void setup() {
  size(800, 400, P3D);
  textAlign(CENTER,CENTER);
  textSize(12);
  textMode(SHAPE);
  sw = width/7.0;
  sh = height/3.0;
  sr = width/14.0;
}  
void draw() {
  background(64);
  translate(0,0,-70);
 
  stylebox ( sw * 0, sh * 0, sr, "noStroke", 0,  "noFill");
  stylebox ( sw * 1, sh * 0, sr, "noStroke", 0,  "0");
  stylebox ( sw * 2, sh * 0, sr, "noStroke", 0,  "255");
  stylebox ( sw * 0, sh * 1, sr, "0",        1,  "noFill");
  stylebox ( sw * 1, sh * 1, sr, "0",        1,  "0");
  stylebox ( sw * 2, sh * 1, sr, "0",        1,  "255");
  stylebox ( sw * 0, sh * 2, sr, "255",      1,  "noFill");
  stylebox ( sw * 1, sh * 2, sr, "255",      1,  "0");
  stylebox ( sw * 2, sh * 2, sr, "255",      1,  "255");
 
  stylebox ( sw * 4, sh * 0, sr, "noStroke", 0, "noFill");
  stylebox ( sw * 5, sh * 0, sr, "noStroke", 0, "0");
  stylebox ( sw * 6, sh * 0, sr, "noStroke", 0, "255");
  stylebox ( sw * 4, sh * 1, sr, "0",        10, "noFill");
  stylebox ( sw * 5, sh * 1, sr, "0",        10, "0");
  stylebox ( sw * 6, sh * 1, sr, "0",        10, "255");
  stylebox ( sw * 4, sh * 2, sr, "255",      10, "noFill");
  stylebox ( sw * 5, sh * 2, sr, "255",      10, "0");
  stylebox ( sw * 6, sh * 2, sr, "255",      10, "255");
}
 
void stylebox(float x, float y, float r, String strStroke, int strWeight, String strFill){
  pushMatrix();
    translate(x, y, 0);
    translate(r, r, 0);
 
    //// draw box
    pushStyle();
      lightControl();
      strokeWeight(strWeight);
      if(strStroke == "noStroke") { noStroke(); }
      else { stroke(int(strStroke)); }
      if(strFill == "noFill") { noFill(); }
      else { fill(int(strFill)); }
      box(r);
    popStyle();
 
    //// draw label
    translate(0,0,80);
    pushStyle();
      strokeWeight(1);
      fill(255);
      noLights();
      rect(-36,-24,72,48);
      fill(0);
      text(strStroke + "/" + strWeight + "\n" + strFill, 0,0,0);      
    popStyle();
 
  popMatrix();
}
 
void lightControl(){
  // lights();
  directionalLight(255, 204, 204,
    -(mouseX / float(width)  - 0.5) * 2,
    -(mouseY / float(height) - 0.5) * 2,
    -1); 
}

One basic question testing to ask with 3D lighting – is a rect interacting in the same way that a very thin box does (a box the size of the plane and few pixels thick)? That can really help you narrow down the problem – e.g. if it relates to the type of primitive, or culling, et cetera.

This one was actually a bug in the library that was fixed just this week! It will be out in the next release.

2 Likes