javascript – WebGL program drawing 3D shapes(triangle)

I am new in WebGL and JavaScript. I want to creating 3D shape. This shape is a triangle and i want to screen like this: https://www.dropbox.com/s/zuag3077sf7agll/cg_hw2_2022.mp4?dl=0 i write code but my shape is not displayed on screen 🙁 can you help me? No matter what I did, the screen did not appear.I can’t see if my code is right or wrong.PLease Help Me.

"use strict";
var canvas;
var gl;

var points = [];
var colors = [];

var NumTimesToSubdivide = 3;
//TODO: Define global variables if needed

    window.onload = function init()
{
    canvas = document.getElementById( "gl-canvas" );
    
    gl = WebGLUtils.setupWebGL( canvas );
    if ( !gl ) { alert( "WebGL isn't available" ); }

    //
    //  Initialize our data for the Sierpinski Gasket
    //

    // First, initialize the vertices of our 3D gasket
    // Four vertices on unit circle
    // Intial tetrahedron with equal length sides
    
    var vertices = [
        vec3(  0.0000,  0.0000, -1.0000 ),
        vec3(  0.0000,  0.9428,  0.3333 ),
        vec3( -0.8165, -0.4714,  0.3333 ),
        vec3(  0.8165, -0.4714,  0.3333 )
    ];
    
    divideTetra( vertices[0], vertices[1], vertices[2], vertices[3],
                 NumTimesToSubdivide);

    //
    //  Configure WebGL
    //
    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 );
    
    // Create a buffer object, initialize it, and associate it with the
    //  associated attribute variable in our vertex shader
    
    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, 3, 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, 3, gl.FLOAT, false, 0, 0 );
    gl.enableVertexAttribArray( vPosition );

    render();

    //TODO: generate tetrahedron geometry and send vertices and colors to GPU
    
    // sliders for viewing parameters
    document.getElementById("rotX").oninput = function(event) {
        numSubdivisions=parseInt(event.target.value);
        //TODO:handle input here
    };
    
    document.getElementById("rotY").oninput = function(event) {
        //TODO:handle input here
    };

    document.getElementById("objRotationZSlider").oninput = function(event) {
        //TODO:handle input here
    };
   
    document.getElementById("posX").oninput = function(event) {
        //TODO:handle input here
    };
    
    document.getElementById("posY").oninput = function(event) {
        //TODO:handle input here
    };
    
    document.getElementById("scaleX").oninput = function(event) {
        //TODO:handle input here
    };
    
    document.getElementById("scaleY").oninput = function(event) {
        //TODO:handle input here
    };
       
    document.getElementById("ResetButton").addEventListener("click", function(){
        //TODO:handle input here
    }); 
   
    render();
}

function triangle( a, b, c, color )
{

    // add colors and vertices for one triangle

    var baseColors = [
        vec3(1.0, 0.0, 0.0),
        vec3(0.0, 1.0, 0.0),
        vec3(0.0, 0.0, 1.0),
        vec3(0.0, 0.0, 0.0)
    ];

    colors.push( baseColors[color] );
    points.push( a );
    colors.push( baseColors[color] );
    points.push( b );
    colors.push( baseColors[color] );
    points.push( c );
}

function tetra( a, b, c, d )
{
    // tetrahedron with each side using
    // a different color
    
    triangle( a, c, b, 0 );
    triangle( a, c, d, 1 );
    triangle( a, b, d, 2 );
    triangle( b, c, d, 3 );
}

function divideTetra( a, b, c, d, count )
{
    // check for end of recursion
    
    if ( count === 0 ) {
        tetra( a, b, c, d );
    }
    
    // find midpoints of sides
    // divide four smaller tetrahedra
    
    else {
        var ab = mix( a, b, 0.5 );
        var ac = mix( a, c, 0.5 );
        var ad = mix( a, d, 0.5 );
        var bc = mix( b, c, 0.5 );
        var bd = mix( b, d, 0.5 );
        var cd = mix( c, d, 0.5 );

        --count;
        
        divideTetra(  a, ab, ac, ad, count );
        divideTetra( ab,  b, bc, bd, count );
        divideTetra( ac, bc,  c, cd, count );
        divideTetra( ad, bd, cd,  d, count );
    }
}

//TODO:modify this function to render the shape and apply transformations
function render()
{
    gl.clear( gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
    g1.drawArrays( gl.TRIANGLES, 0, points.length );
}
<!DOCTYPE html>
<html>

<script id="vertex-shader" type="x-shader/x-vertex">
//TODO: add necessary modifications to vertex shader
// for handling colors and transformations
attribute  vec4 vPosition;
attribute vec3 vColor;
varying vec4 color;
void main() 
{
    gl_Position = vPosition;
    color = vec4(vColor, 1.0);
} 
</script>

<script id="fragment-shader" type="x-shader/x-fragment">
//TODO: add necessary modifications to fragment shader
// for handling colors
precision mediump float;
   
varying vec4 color;

#ifdef GL_ES
#endif

void main()
{
    gl_FragColor = vec4(1.0,0.0,0.0,1.0);
}
</script>

<script type="text/javascript" src="../Common/webgl-utils.js"></script>
<script type="text/javascript" src="../Common/initShaders.js"></script>
<script type="text/javascript" src="../Common/MV.js"></script>
<script type="text/javascript" src="deneme1.js"></script>
<body style="background-color:powderblue;">

<div>
Zakire Çınar, 180316072
</div>
<table>
    <tr>
        <td>
        <canvas id="gl-canvas" width="512" height="512">
            Oops ... your browser doesn't support the HTML5 canvas element
        </canvas>
        </td>
        <td>
            <div> <strong>---- Controls ----</strong> </div><br>    
            <div> <strong>Translations</strong> </div>
            <div>
            Translate X: -1<input id="posX" type="range"
             min="-1" max="1" step="0.1" value="0" />1
            </div> 
            
            <div>
            Translate Y: -1<input id="posY" type="range"
             min="-1" max="1" step="0.1" value="0" />1
            </div>      
            <br>
            
            
            <div> <strong>Rotations</strong> </div>
            <div>
            Rotation on X: -90<input id="rotX" type="range"
             min="-90" max="90" step="5.0" value="0" />90
            </div> 
            <div>
            Rotation on Y: -90<input id="rotY" type="range"
             min="-90" max="90" step="5.0" value="0" />90
            </div> 
            <div>
            Rotation on Z: -90<input id="objRotationZSlider" type="range"
             min="-90" max="90" step="5.0" value="0" />90
            </div> 
            <br>
            
            <div> <strong>Scaling</strong> </div>
            <div>
            Scale X: -2<input id="scaleX" type="range"
             min="-2" max="2" step="0.1" value="0" />2
            </div> 
            
            <div>
            Scale Y: -2<input id="scaleY" type="range"
             min="-2" max="2" step="0.1" value="0" />2
            </div>          
            <br>
            
            <div>
            <button id = "ResetButton">Reset</button>
        </td>
    </tr>
</table>
<div>

</body>
</html>

Leave a Comment