It is currently 29. Mar 2024. 06:02



Reply to topic  [ 7 posts ] 
WebGL Lego 
Author Message
AFOL
User avatar

Joined: 11. Sep 2009. 23:04
Posts: 1028
Post WebGL Lego
WebGL je zgodna realtivno mlada tehnologija, krizanac javascripta i GPU shadera (GLSLa), koju odnedavno pomalo koristim.
Omogucava svakakve stoseve u browseru, a posto ima i nekoliko lego aplikacija, mislila sam da je zgodno imati ovakvu temu.
Samo da napomenem da ne radi po defaultu u svim browserima, pogotovo ne IE (iako i za to ima fix).

Build with Chrome: http://www.buildwithchrome.com


Lego Builder: http://kovacsv.github.io/JSModeler/documentation/examples/legobuilder.html
(zgodno ako se netko zeli sam poigrati s kodom)

Mecabricks: http://www.mecabricks.com
Vec relativno napredan sustav, predstavljen nedavno i na BrickSetu.
Postoji par youtube videa s uputstvima, ako netko treba.

Jos jedan dobar izvor za proucavanje:
Uputstva na ovom linku: http://forums.ldraw.org/read.php?20,8946,8946
vode na ovu stranicu: http://www.virtuality.gr/AGG/EaZD-Lego/index.html
jos vam treba scena (auto i superman): http://www.virtuality.gr/AGG/EaZD-Lego/lego.scene

_________________
Moji setovi BL trgovina
Lego slike Lego slike 2 Kolekcija slike


15. Oct 2013. 19:19
Profile
AFOL
User avatar

Joined: 11. Sep 2009. 23:04
Posts: 1028
Post Re: WebGL Lego
Mali hands-on tutorial...
Za pocetak html + javascript hello word:
Code:
<html>
<body>
<script>
   alert('Hello, World!')
</script>
<p>bla bla</p>
</body>
</html>


Spremite gornji kod kao npr. webgl1.html file, te ga otvorite u svom browseru.
Javascript je izmedu script tagova.

_________________
Moji setovi BL trgovina
Lego slike Lego slike 2 Kolekcija slike


16. Oct 2013. 17:59
Profile
AFOL
User avatar

Joined: 11. Sep 2009. 23:04
Posts: 1028
Post Re: WebGL Lego
Minimalni webGL primjer:
Koristim three.js zbog relativne jednostavnosti: http://threejs.org/
Trebaju vam ove dvije skripte iz three.js (ili ga cijelog skinite i prilagodite lokacije skripti u primjeru) koje trebate staviti u direktorij "scripts":
http://wikisend.com/download/734590/three.min.js
http://wikisend.com/download/431054/OrbitControls.js

Code:
<html>
   <body>
      <script src="scripts/three.min.js"></script>
      <script src="scripts/OrbitControls.js"></script>   

      <script>
         var container;
         var camera, scene, renderer;
         var cube;
         var controls;

         init();
         animate();

         function init() {

            container = document.createElement( 'div' );
            document.body.appendChild( container );

            camera = new THREE.PerspectiveCamera( 45, window.innerWidth / window.innerHeight, 1, 5000 );
            camera.position.set( 700, 700, 600);

            scene = new THREE.Scene();
            controls = new THREE.OrbitControls( camera );


            // Cube
            var geometry = new THREE.CubeGeometry( 200, 200, 200 );
            cube = new THREE.Mesh( geometry,  new THREE.MeshBasicMaterial( { wireframe:true, color: 0x606060} ) );
            cube.position.set( 0, 0, 0);
            scene.add( cube );


            //renderer
            renderer = new THREE.WebGLRenderer();
            renderer.sortObjects = false;
            renderer.setSize( window.innerWidth, window.innerHeight );

            container.appendChild( renderer.domElement );

            //event listeners
            window.addEventListener( 'resize', onWindowResize, false );

         }

         function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize( window.innerWidth, window.innerHeight );
         }

         function animate() {
            controls.update();
            requestAnimationFrame( animate );
            render();
         }

         function render() {
            renderer.render( scene, camera );
         }

      </script>

   </body>
</html>

_________________
Moji setovi BL trgovina
Lego slike Lego slike 2 Kolekcija slike


16. Oct 2013. 18:48
Profile
AFOL
User avatar

Joined: 11. Sep 2009. 23:04
Posts: 1028
Post Re: WebGL Lego
U gornjem primjeru su tri java skripte.

Dvije su dijelovi three.js
- prva cijela minimalna jezgra three.js toolboxa (three.min.js)
- druga omogucava kruzne kontrole misem (OrbitControls.js)

Treca skripta sadrzi webgl kod.
Tkogot je radio s OpenGL-om - struktura ovog dijela ce mu biti poznata, posto se ovdje isto radi o "state machine" pristupu koji se stalno vrti u petlji.
Cetiri funkcije su u nasoj skripti.
Init, onWindowResize, animate, render
Mogli smo proci i sa npr. dvije - jednostavno izostaviti sta se desava pri mjenjanju velicine "prozora" (onWindowResize),
te umjesto pozivati render funkciju u animate funkciji - napisati tu jednu liniju koda u animate.
Znaci bitne funkcije (pozvane na pocetku skripte)
- Init - inicijalizira nasu scenu
- Animate - je nasa animacijska petlja (tu se updatiraju kontrole, te renderira "nova" scena)

Init funkcija:
html stvari: sve ce se dogadjati u div elementu (container)
standardne graficke stvari: definicija kamere, scene, kontrola
- zatim definiramo novu geometriju - kocku, te novi mesh koji koristi tu geometriju i obican sivi materijal (wireframe)
- dodajemo kocku na scenu
standardne stvari: definiramo renderer, stavimo ga u container

I to je to. WebGL wireframe kocka koju mozemo rotirati u browseru.
Na netu ima jako puno tutorijala o html/javascript/opengl/webgl.

_________________
Moji setovi BL trgovina
Lego slike Lego slike 2 Kolekcija slike


16. Oct 2013. 19:10
Profile
Redovni član kluba
User avatar

Joined: 21. Nov 2009. 18:51
Posts: 4909
Post Re: LEGO- zanimljivosti
Ako imate Google Chrome obavezno probajte.

http://www.buildwithchrome.com/

_________________
Flickr


29. Jan 2014. 22:06
Profile
User avatar

Joined: 27. Jan 2010. 15:15
Posts: 2936
Location: Shinigami Realm
Post Re: LEGO- zanimljivosti
Super je, bas sam gledao danas na fejsu reklamu.

_________________
Brickset

U Dark Ageu...


29. Jan 2014. 23:20
Profile WWW
AFOL
User avatar

Joined: 11. Sep 2009. 23:04
Posts: 1028
Post Re: LEGO- zanimljivosti
webgl :LEGO05:
viewtopic.php?f=44&t=5886

_________________
Moji setovi BL trgovina
Lego slike Lego slike 2 Kolekcija slike


29. Jan 2014. 23:54
Profile
Display posts from previous:  Sort by  
Reply to topic   [ 7 posts ] 

Who is online

Users browsing this forum: No registered users and 23 guests


You cannot post new topics in this forum
You cannot reply to topics in this forum
You cannot edit your posts in this forum
You cannot delete your posts in this forum
You cannot post attachments in this forum

Jump to:  
Powered by phpBB © 2000, 2002, 2005, 2007 phpBB Group.
Designed by ST Software for PTF.