WEBGL Help - Experiencing pointLight() issues

p5.js
1

Hi all.
Having problems with pointLight(). The light source on my canvas seems weak compared to the tutorial I am following.

The tutorial (Coding Train) browser renders this,
while my browser (Chrome 67) renders this:
47%20PM

My code is identical to the tutorial’s - can’t figure out what the problem might be.
As you can see, the lights on my render are extremely faint - I tried doubling or tripling the pointLight() calls and the light does get stronger, but still doesn’t compare to the example and obviously is not the solution.

Any ideas?

Heres the code:

let angle = 0;

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

function draw() {
	pointLight(0, 0, 255, -200, 0, 0);
	pointLight(255, 0, 0, 200, 0, 0);

	background(175);

	rotateX(angle);
	rotateY(angle * 0.3);
	rotateZ(angle * 1.2);

	noStroke();
	ambientMaterial(255);
	
	sphere(100);

	angle += 0.03;
}

Thanks in advance!

1 Like
2

Hi @okliis ! Thanks for posting this question! I think this may be the same issue as discussed in Plane not being lit in scene. Does that seem right? Or is it different?

1 Like
3

Hey @outofambit !
The issue is along the same lines - difference is that I’m using a sphere, whereas the bug fix specifically references a plane. Perhaps it applies to spheres too?

4

hi @okliis, can you let us know what p5.js version is listed at the top of the p5.js or p5.min.js file linked to your project? Thanks!

5

Hi @kjhollen,
p5.js v0.6.0 January 19, 2018 - I think thats it! :slight_smile:

This just made me realize that my ‘p5 manager’ has been loading my sketches with 0.6.0 all along.
I’m going to update libraries in my p5 manager right now, and report back here - brb!

6

Ok, so I recreated the project with an updated p5.js file (v0.6.1 April 27, 2018) and I’m getting the same results.

7

Thanks for the update! Hmm, I think there are two different bugs in the mix here, one in the p5 version in Dan’s video and another in the current release.

The results shouldn’t light so much of the circle in the version in use in the video (which I think was filmed in December). We’ve had a number of lighting fixes since then. It makes sense that only the sides of the circle would be lit—the lights are positioned exactly to the left and right of the sphere.

You can get close to the behavior you’re seeking by using this, putting the z-coordinate for the light in front of the sphere:

  pointLight(0, 0, 255, -200, 0, 250);
  pointLight(255, 0, 0, 200, 0, 250);

But it will still look a little dull compared to the video. The level of brightness is a bug in our code, I think (in Processing / Java, the same code produces much brighter lights). I’ll see if I can track that down and file an issue on github.

And, adding this bit to setup will also improve the smoothness of the lighting:

  setAttributes('perPixelLighting', true);
2 Likes
8

That’s true, the result in Dan’s video is a little brighter than it should be now that you said it.
Rotating them on the z-axis and perPixelLighting did the trick, thank you!!!

1 Like