Displaying a 3D Cube with WebGL

Unity Engine
1

I’m building a 3D static cube with WebGL.I wrote the shaders in the html file and the application program in the js file. When I try to load the html the cube is not displayed. Could anyone help me?

Here is the code :

JS
```javascript
**“use strict”;
var canvas;
var gl;

var NumVertices = 36;

var points;
var colors;
var delay = 100;

window.onload = function init()
{
canvas = document.getElementById( “gl-canvas” );

gl = WebGLUtils.setupWebGL( canvas );
if ( !gl ) { alert( "WebGL isn't available" ); }

colorCube();

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

gl.enable(gl.DEPTH_TEST);

//
//  Load shaders and initialize attribute buffers
//
var program = initShaders( gl, "vertex-shader", "fragment-shader" );
gl.useProgram( program );

var cBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, cBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(colors), gl.STATIC_DRAW );

var vColor = gl.getAttribLocation( program, "vColor" );
gl.vertexAttribPointer( vColor, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vColor );

var vBuffer = gl.createBuffer();
gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
gl.bufferData( gl.ARRAY_BUFFER, flatten(points), gl.STATIC_DRAW );


var vPosition = gl.getAttribLocation( program, "vPosition" );
gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
gl.enableVertexAttribArray( vPosition );

render();

}

function colorCube()
{
quad( 1, 0, 3, 2 );
quad( 2, 3, 7, 6 );
quad( 3, 0, 4, 7 );
quad( 6, 5, 1, 2 );
quad( 4, 5, 6, 7 );
quad( 5, 4, 0, 1 );
}

function quad(a, b, c, d)
{
var vertices = [
vec4( -0.5, -0.5, 0.5, 1.0 ),
vec4( -0.5, 0.5, 0.5, 1.0 ),
vec4( 0.5, 0.5, 0.5, 1.0 ),
vec4( 0.5, -0.5, 0.5, 1.0 ),
vec4( -0.5, -0.5, -0.5, 1.0 ),
vec4( -0.5, 0.5, -0.5, 1.0 ),
vec4( 0.5, 0.5, -0.5, 1.0 ),
vec4( 0.5, -0.5, -0.5, 1.0 )
];

var vertexColors = [
                    [ 0.0, 0.0, 0.0, 1.0 ],  // black
                    [ 1.0, 0.0, 0.0, 1.0 ],  // red
                    [ 1.0, 1.0, 0.0, 1.0 ],  // yellow
                    [ 0.0, 1.0, 0.0, 1.0 ],  // green
                    [ 0.0, 0.0, 1.0, 1.0 ],  // blue
                    [ 1.0, 0.0, 1.0, 1.0 ],  // magenta
                    [ 0.0, 1.0, 1.0, 1.0 ],  // cyan
                    [ 1.0, 1.0, 1.0, 1.0 ]   // white
                    ];

// We need to parition the quad into two triangles in order for
// WebGL to be able to render it.  In this case, we create two
// triangles from the quad indices

//vertex color assigned by the index of the vertex

var indices = [ a, b, c, a, c, d ];

for ( var i = 0; i < indices.length; ++i ) {
    points.push( vertices[indices[i]] );
    //colors.push( vertexColors[indices[i]] );

    // for solid colored faces use
    colors.push(vertexColors[a]);

}

}

function render()
{
gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.drawArrays( gl.TRIANGLES, 0, NumVertices );

}**
```

The quad function simply takes in input 4 vertexes and it builds 2 Triangles for each face (6 faces).

HTML

<!DOCTYPE html>
<html>

    <script id="vertex-shader" type="x-shader/x-vertex">

        attribute  vec4 vPosition;
        attribute  vec4 vColor;
        varying vec4 fColor;



        void main()
        {
            fColor = vColor;
            gl_Position = 0.5 * vPosition;
        }
        </script>

    <script id="fragment-shader" type="x-shader/x-fragment">

        precision mediump float;

        varying vec4 fColor;

        void
        main()
        {
            gl_FragColor = fColor;
        }
    </script>
    <script type="text/javascript" src="/Users/Rubio/Desktop/University/MAGISTRALE/INTERACTIVE GRAPHICS/ESERCIZI/webgl-utils.js"></script>
    <script type="text/javascript" src="/Users/Rubio/Desktop/University/MAGISTRALE/INTERACTIVE GRAPHICS/ESERCIZI/initShaders.js"></script>
    <script type="text/javascript" src="/Users/Rubio/Desktop/University/MAGISTRALE/INTERACTIVE GRAPHICS/ESERCIZI/MV.js"></script>
    <script type="text/javascript" src="/Users/Rubio/Desktop/University/MAGISTRALE/INTERACTIVE GRAPHICS/ESERCIZI/Cube.js"></script>

    <body>
        <canvas id="gl-canvas" width="512" height="512">
            Oops ... your browser doesn't support the HTML5 canvas element
            </canvas>

            



            </body>
            </html>
2

Hello and welcome, but this a forum for the Unity WebGL export we support. It is not a general WebGL programming forum so you might have a better chance getting an answer to your question in a different venue like Newest 'webgl' Questions - Stack Overflow

2 Likes