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:
Creator: Hexalore
License: CC-BYby Ashkelon
licensed under Creative Commons Attributionby Loïc Norgeot
by AVATTA (https://sketchfab.com/avatta)
licensed under Creative Commons Attributionand have learnt from:
Other Interesting WebGL projects:
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';
}
}
3D War game for Linux
You can play with historical vehicles (planes, tanks, ...) worldwide.
Fractal generation, Mandelbrot set, Julia set
WebGL TEST!
Simple test with a dualcone and more 3d objects:
23-07-2016
River fishing is an interesting way to catch fishes in a flowing water...
Me and my friends spent good days at Lake Warali in Baja.
17-05-2015
I tried different Lake, they say there are big fishes. Every time I had fished here I caught 4+ carps too.
may-2012
23-10-2011
03-10-2010
WARNING!!!
You can buy USB FLASH DRIVES and MP3/MP4/MP5 PLAYERS with FAKE memory sizes on the Internet!
Visitcount (since 2021-05-30): 6994