Xtykutl

I'm trying to make a canvas displaying a 3-dimensional space with normals and a light source. A slider will also be implemented to be able to change the x and the y of the light source. When I run the HTML file in Chrome, all i get is a blank canvas. What i should be getting is a canvas showing rows of block normals with spheres on top. The error I'm guessing is most likely in this implementation of the normals. The code I included consists of the code involving the normals in my .js file.

    get normals(){

        return[[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0],[0,1,0,0], ];

    }



window.addEventListener("load", function init()

{   

    let canvas = document.getElementById( "gl-canvas" );



    let gl = WebGLUtils.setupWebGL(canvas);

    if ( !gl ) { alert( "WebGL isn't available" ); }

    gl.enable(gl.DEPTH_TEST);

    gl.viewport( 0, 0, canvas.width, canvas.height );

    gl.clearColor(...X11.AliceBlue);





    let program = initShaders( gl, vertex_shader, fragment_shader);

    gl.useProgram( program );





    let vertices = ;

    let normals = ;



    const extent = 3;

    const minX = -extent;

    const maxX = extent;

    const minZ = -extent;

    const maxZ = extent;



    let ground = new Ground(minX, maxX, minZ, maxZ);

    vertices = vertices.concat(ground.points);

    colors = colors.concat(ground.color_scheme);

    normals = normals.concat(ground.normals);



    const pillarRows = 5;

    const pillarColumns = 6;

    const pillarRadius = .05;

    const pillarHeight = .5;

    const pillarSchemeColors = [X11.LightSkyBlue1, X11.LightSkyBlue2];





    const pMaxX = maxX - pillarRadius;

    const pMinX = minX + pillarRadius;

    const pMaxZ = maxZ - pillarRadius;

    const pMinZ = minZ + pillarRadius;



    const xDelta = (pMaxX - pMinX) / (pillarColumns - 1);

    const zDelta = (pMaxZ - pMinZ) / (pillarRows - 1);



    for(let r = 0; r < pillarRows; r++ ) {

        for(let c = 0; c < pillarColumns; c++) {



            const baseX = pMinX + c * xDelta;

            const baseY = 0;

            const baseZ = pMinZ + r * zDelta;



            let box = new cs4722_objects.Block();

            box.width = Math.sqrt(2) * pillarRadius;

            box.depth = box.width;

            box.center = [baseX, baseY + pillarHeight/2, baseZ];

            box.height = pillarHeight;



            vertices = vertices.concat(box.points);

            normals = normals.concat(box.normals);



            //creates the box normals and their parameters

            let sph = new cs4722_objects.Sphere();

            sph.radius = .1;

            sph.center = [baseX, (baseY + pillarHeight) + .1, baseZ];

            vertices = vertices.concat(sph.points);

            normals = normals.concat(sph.normals);



            //light effects

            let objAmbient = X11.Yellow;

            let objDiffuse = vec4(1.0, 0.8, 0.0, 1.0);

            let objSpecular = X11.DarkMagenta;

            let objShininess = 120;



            //position of light

            let lightPosition = [1,1,3,1];

            let lightAmbient = [1,1,1,1];

            let lightDiffuse = [1,1,1,1];

            let lightSpecular = [1,1,1,1];



            //combines the objects effects with the lights position

            let ambientProduct = mult(objAmbient, lightAmbient);

            let diffuseProduct = mult(objDiffuse, lightDiffuse);

            let specularProduct = mult(objSpecular, lightSpecular);

            let shininess = objShininess

        }



        document.getElementById("Y-axis").value = 50;



        listenerSetup();