p5.js WEBGL Lighting strange behavior

Jonas_Karg

I am working on some game with randomly generated terrain. I tried to implement lighting so that you can see the terrain without the need of a mesh but it won't work.

I tried a lot of stuff including to implement some of Daniel Shiffmans code or the code on the official p5 site(i am aware that the code on the site is outdated).

The entire thing can be found here: http://webspot.ddns.me/users/BrowserGame/ (in case you dont know: you can look at website code with ctrl+u in most browsers)

Here is the javascript:

// Jonas Karg 28.01.2018
// Elements
var fps = document.getElementById("frameDisplay");

// Variables
var cnv,
    x, y,
    scl = 10, nodes = 100, perlinZoom = 10, deltaHeight = 70,
    shift,
    rot = 0,
    heightMap = [];

function setup() {
    cnv = createCanvas(innerWidth, innerHeight, WEBGL);
    cnv.parent("gameContainer");
    // setAttributes('antialias', true);

    // noStroke();
    stroke(0);
    // fill(100, 255, 100);
    fill(255);
    strokeWeight(1);
    shift = scl * nodes / 2;

    for (x = 0; x < nodes; x ++) {
        heightMap[x] = [];
        for (y = 0; y < nodes; y++) {
            heightMap[x][y] = noise(x / perlinZoom, y / perlinZoom) * deltaHeight;
        }
    }
}

function draw() {
    background(0, 0, 0, 0);
    fpsUpdater();

    // ambientLight(120);
    pointLight(255, 0, 0, 200, 0, 0);

    rotateX(radians(70));
    if (mouseIsPressed) {rot = radians(-mouseX / 5.0);}
    rotateZ(rot);
    translate(-shift, -shift, 0);

    specularMaterial(255);
    terrain();
}

function terrain() {
    ambientMaterial(255);
    for (y = 0; y < nodes - 1; y ++) {
        beginShape(TRIANGLE_STRIP);
        for (x = 0; x < nodes; x ++) {
            vertex(x * scl, y * scl, heightMap[x][y]);
            vertex(x * scl , (y + 1) * scl, heightMap[x][y+1]);
        }
        endShape();
    }
}

function windowResized() {
    resizeCanvas(innerWidth, innerHeight);
}

function fpsUpdater() {
    if(frameCount % 10 == 0) {
        fps.innerHTML = "Framerate: " + round(frameRate());
    }
}

function test() {
}

Thanks in advance! :D

Jonas_Karg

Looks like the lib is not built for this kind of shading. I'll try to change the lib somehow at some point. The link is now offline.