Cubo 3D statico con WebGL

RubioRick · 8 Aprile 2018

Salve , sto cercando di visualizzare un cubo utilizzando webGL , purtroppo anche seguendo i vari passaggi di costruzione non capisco perchè quando apro l'html per visualizzarlo il canvas appare bianco e il cubo non è presente . Qualcuno saprebbe aiutarmi ? Posto qui il codice :

HTML

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>

JavaScript

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 );
 
}

Cerca

Cubo 3D statico con WebGL

RubioRick

Nuovo Utente

Entra