WebGL TEST!

 

I've just tried to implement a 3D object into my website so I'm trying to learn using WebGL API.

Minimum system requirements: I think most of the objects works in ie11, but some of them may need minimum edge18 (e.g. SinPlane when creating more than 200k vertexes), - as I'm developing and testing under Linux in FireFox 68 and Chrome 81, (and it also worked in Opera 67 and Konqueror 5), - I don't really know how MS handle it. It may work well just on an Intel HD630 inCPU VGA card. I'm also trying on my old Sony Xperia XA mobile under Android 6 in FireFox 68 and Chrome 79.

Although WebGL's min. req. is only ie11, my code built as a Javascript "module", so the min. req. is higher, and it won't work under ie.
Compatibility table (see import at Mozilla)

For retro browser and computer users I added 1.0.5 version, which has less opportunity, so if the browser don't support module but support WebGL, it will show some objects. :-)
(Although I have made, I don't really understand why it is necessary, because I got out from garbage my old Pentium4 computers (from 2004,2006) and tried to open this page. They were slow when more than 50k vertexes were drawn, but Firefox 60 Mageia 6.1 32bit with Radeon r9600 and Chromium 73 Debian 9 32bit with Mobility Radeon x1600 did everything well.)

Wavefront object loader also works for me, but "Kokura Castle" object is big enough, so maybe this object cannot be displayed on systems with 4GB or less RAM.

I'm using:

Displaying objects:

  • "Book - Vertex chameleon study" (https://skfb.ly/6SKAH) by Oleaf is licensed under Creative Commons Attribution-NonCommercial (http://creativecommons.org/licenses/by-nc/4.0/).
  • "Chair" (https://skfb.ly/6RJJH) by haytonm is licensed under Creative Commons Attribution (http://creativecommons.org/licenses/by/4.0/).

  • "Formula 2 Car"


    https://blendswap.com/blend/28726

    Creator: Hexalore

    License: CC-BY

  • "Military truck"


    (https://skfb.ly/ouXvG) (https://sketchfab.com)

    by Ashkelon

    licensed under Creative Commons Attribution
    (http://creativecommons.org/licenses/by/4.0/).

  • "Ship in a bottle"


    (https://skfb.ly/6DV9G) (https://sketchfab.com)

    by Loïc Norgeot


    licensed under CC-BY-NC-4.0
    (http://creativecommons.org/licenses/by-nc/4.0/).

  • "Kokura Castle"


    (https://sketchfab.com/3d-models/kokura-castle-aba23531911c45439067a6e0aaccad07)

    by AVATTA (https://sketchfab.com/avatta)

    licensed under Creative Commons Attribution
    (http://creativecommons.org/licenses/by/4.0/).

and have learnt from:

Other Interesting WebGL projects:

 

Three.js TEST!

 

I've found Three.js library which makes easier to create 3D object in browser.


var geometry = new THREE.IcosahedronGeometry();
var material = new THREE.MeshNormalMaterial();
var Icosahedron = new THREE.Mesh( geometry, material );
scene.add( Icosahedron );

 

My code:


class ThreeObj extends myObject {

  constructor( width, height, scenecontainer, settingsdiv ) {
    super(null);
    
    this.objectname = 'ThreeObj';
    this.objectversion = '1.0.1';
    
    this.scene = null;
    this.camera = null;
    this.renderer = null;

    this.width = width;
    this.height = height;
    this.scenecontainer = document.getElementById(scenecontainer);
    this.settingsdiv = document.getElementById(settingsdiv);
    this.myobjects = [];
  }

  main() {
    this.scene = new THREE.Scene();
    this.camera = new THREE.PerspectiveCamera( 75, this.width/this.height, 0.1, 1000 );
    this.camera.position.z = 5;

    this.renderer = new THREE.WebGLRenderer({ alpha: true });
    this.renderer.setSize( this.width, this.height );
    this.scenecontainer.appendChild( this.renderer.domElement );
    this.settingsdiv.appendChild( 
        new Switch(this, 'tch', 'Change Object to', false, "Icosahedron", "Lathe").GenerateCode()
    );
    
    this.myobjects = this.myobjects.concat( new myIcosa( this, this.scene, true ) );
            
    requestAnimationFrame( render );
  }

  animate() {
    this.myobjects.forEach( function( item, id ) {
        var sign = ((id%2)==0 ? 1 : -1 );
        item.rotate( sign * 0.01, sign * 0.02, sign * 0.01 );
    } );
    this.renderer.render( this.scene, this.camera );
  };

    
  UpdateandRedraw() {
    var currentobjectname = this.myobjects[0].getObjectName();
    for (var i=0; i<this.myobjects.length; i++) { 
        this.myobjects[i].remove();
        delete this.myobjects[i];
    }
    delete this.myobjects;
    this.myobjects = [];
    
    if ( currentobjectname == 'myLathe' ) {
        this.myobjects = this.myobjects.concat( new myIcosa( this, this.scene, true ) );
    }
    else {
        this.myobjects = this.myobjects.concat( new myLathe( this, this.scene, true ) );
        this.myobjects = this.myobjects.concat( new myTetra( this, this.scene, true ) );
        this.myobjects = this.myobjects.concat( new myCube( this, this.scene, true ) );
    }
  }
};

...

class myIcosa extends my3dObject {
    constructor( parent, scene, drawedges ) {
        super( parent, scene, 'THREE.IcosahedronGeometry', 'THREE.MeshNormalMaterial', drawedges );
        this.objectname = 'myIcosa';
        this.objectversion = '1.0.1';

        this.scale(3,3,3);
    }
}

class myLathe extends my3dObject {
    constructor( parent, scene, drawedges ) {
        super( parent, scene, 'myLatheGeometry', 'THREE.MeshNormalMaterial', drawedges );
        this.objectname = 'myLathe';
        this.objectversion = '1.0.1';

        this.obj.material.side = THREE.DoubleSide;
        this.scale(.8,.8,.8);
        this.translate(1,1,1);
    }
}

class myTetra extends my3dObject {
    constructor( parent, scene, drawedges ) {
        super( parent, scene, 'THREE.TetrahedronGeometry', 'THREE.MeshNormalMaterial', drawedges );
        this.objectname = 'myTetra';
        this.objectversion = '1.0.1';
    }
}

Visitcount (since 2021-05-30): 7316