Hydrogen: The library for generating a WebGL scene for the web

This is a package candidate release! Here you can preview how this package release will appear once published to the main package index (which can be accomplished via the 'maintain' link below). Please note that once a package has been published to the main package index it cannot be undone! Please consult the package uploading documentation for more information.

[maintain] [Publish]

Warnings:

The library for generating a WebGL scene for the web for the Haskell programming language.


[Skip to Readme]

Properties

Versions 0.1.0.0, 0.1.0.0
Change log None available
Dependencies aeson (>=0.11.2), base (>=4.7 && <5), binary (>=0.8.3), directory (>=1.2.6), HFitUI, Hydrogen, MissingH (>=1.4.0), shakespeare (>=2.0.11), yaml (>=0.8.21) [details]
License BSD-3-Clause
Copyright 2017 Author name here
Author Pavel
Maintainer iqsf@ya.ru
Category Web
Home page https://github.com/iqsf/Hydrogen.git
Source repo head: git clone https://github.com/iqsf/Hydrogen
Uploaded by QSpider2017 at 2017-06-14T10:02:49Z

Modules

Downloads

Maintainer's Corner

Package maintainers

For package maintainers and hackage trustees


Readme for Hydrogen-0.1.0.0

[back to package description]

Hydrogen

Introduction

Library for generating a WebGL scene by using ThreeJS on the web for the Haskell programming language.

Short description

The Hydrogen uses the HFitUI library as the result of generating a WebGL scene. The WebGL scene is generated from a YAML file. This approach greatly simplifies the process of generating a WebGL scene in a Haskell with HFitUI library. Below is an example generation scene from YAML file code:

/*Generate by HScript from the HFitUI library*/
//Автоматически сгенерированный скрипт
//Приложение Hydrogen (0.0.1)
if(!Detector.webgl) Detector.addGetWebGLMessage();
 
var camera;
var scene;
var groupRoot;
var root = document.getElementById("idRoot");
var canvas3D = document.getElementById("idCanvas");
var renderer;
var stats;
var orbitControls = null;
var flyControls = null;
 
function render (){
  renderer.render(scene, camera); 
}
 
function update (){
  if(stats) stats.update(); 
  if(flyControls) flyControls.update(1); 
}
 
function animate (){
  requestAnimationFrame(animate); 
  render();
  update();
}
 
function onWindowResize (){
  if (camera) {
      camera.aspect = window.innerWidth / (window.innerHeight);
      camera.updateProjectionMatrix();
  }
  renderer.setSize( window.innerWidth, window.innerHeight);
  render();
}
 
function drawRootAxes (){
  var dirX = new THREE.Vector3( 1, 0, 0 ); dirX.normalize();
  var dirY = new THREE.Vector3( 0, 1, 0 ); dirY.normalize();
  var dirZ = new THREE.Vector3( 0, 0, 1 ); dirZ.normalize();
  var origin = new THREE.Vector3( 0, 0, 0 );
  var length = 1;
  var hexX = 0xff0000;
  var hexY = 0x00ff00;
  var hexZ = 0x0000ff;
  scene.add(new THREE.ArrowHelper(dirX, origin, length, hexX));
  scene.add(new THREE.ArrowHelper(dirY, origin, length, hexY));
  scene.add(new THREE.ArrowHelper(dirZ, origin, length, hexZ));
}
 
function init (){
  scene = new THREE.Scene();
  groupRoot = new THREE.Group();
  groupRoot.position.set( 0.0 , 0.0 , 0.0 );
  groupRoot.rotation.set( 0.0 , 0.0 , 0.0 );
  groupRoot.scale.set( 1.0 , 1.0 , 1.0 );
  scene.add(groupRoot);
  var grid = new THREE.GridHelper( 25, 50, 0x586e75, 0x073642 );
  grid.rotateOnAxis( new THREE.Vector3( 1, 0, 0 ), 90 * ( Math.PI/180 ) );
  groupRoot.add(grid);
  drawRootAxes();
  renderer = new THREE.WebGLRenderer({canvas: canvas3D, antialias: false});
  renderer.setClearColor( 0x002b36 );
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize( window.innerWidth, window.innerHeight );
  renderer.sortObjects = false;
  var material4466976ede5111e6a5d3f3eee64202b6 = new THREE.MeshLambertMaterial( { color: 0x6e6e6e, emissive: 0x6e6e6e, emissiveIntensity: 0.5, opacity: 1.0, transparent: false } ); 
  (function(material){  })( material4466976ede5111e6a5d3f3eee64202b6 ); 
  var materiale6f1bd16e2fb11e687c71772a2fe4228 = new THREE.MeshLambertMaterial( { color: 0xa41a, emissive: 0x6e06e, emissiveIntensity: 0.0, opacity: 1.0, transparent: false } ); 
  (function(material){  })( materiale6f1bd16e2fb11e687c71772a2fe4228 ); 
  var material4e181b50e3bc11e6924d8bbeaf59f608 = new THREE.MeshBasicMaterial( { map: new THREE.TextureLoader().load("/texture_3d/3165d44e-e398-11e6-aac6-e7c59ca562a2") , opacity: 1.0, transparent: false } ); 
  (function(material){  })( material4e181b50e3bc11e6924d8bbeaf59f608 ); 
  var material7badc81ae6b611e69cc12b72c18ca176 = new THREE.MeshFaceMaterial([ new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=0"), side: THREE.BackSide } )
                                                                         , new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=1"), side: THREE.BackSide } )
                                                                         , new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=2"), side: THREE.BackSide } )
                                                                         , new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=3"), side: THREE.BackSide } )
                                                                         , new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=4"), side: THREE.BackSide } )
                                                                         , new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("/texture_3d/6b6fc102-e462-11e6-88eb-433f284ad9f1?nm=5"), side: THREE.BackSide } )
                                                                         ]); 
         
  (function(material){  })( material7badc81ae6b611e69cc12b72c18ca176 ); 
  camera = new THREE.PerspectiveCamera( 45.0, window.innerWidth / window.innerHeight, 1.0, 1000.0 );
  camera.up.set( 0.0, 0.0, 1.0);
  camera.position.set( 0.0 , -10.0 , 10.0 );
  scene.add(camera);
  var lighte436c6c8f1d511e6837cafadb174b93a = new THREE.PointLight( 0xFFFFFF , 0.8 , 0.0 , 1.0); 
  lighte436c6c8f1d511e6837cafadb174b93a.position.set( 0.0 , 0.0 , 0.0 ); 
  (function(light){  })( lighte436c6c8f1d511e6837cafadb174b93a ); 
  camera.add(lighte436c6c8f1d511e6837cafadb174b93a); 
  var light9ab6f73cf1d211e6ad6c23968912c3bd = new THREE.AmbientLight( 0x999999 , 1.0 ); 
  (function(light){  })( light9ab6f73cf1d211e6ad6c23968912c3bd ); 
  scene.add(light9ab6f73cf1d211e6ad6c23968912c3bd); 
  var figure5d2f5584e6b611e6b1e007ba4b916aa0 = new THREE.Mesh( new THREE.BoxGeometry( 500.0 , 500.0 , 500.0 ) , material7badc81ae6b611e69cc12b72c18ca176 ); 
  figure5d2f5584e6b611e6b1e007ba4b916aa0.position.set( 0.0 , 0.0 , 0.0 ); 
  figure5d2f5584e6b611e6b1e007ba4b916aa0.rotation.set( 1.570796 , 0.0 , 0.0 ); 
  figure5d2f5584e6b611e6b1e007ba4b916aa0.scale.set( 1.0 , 1.0 , 1.0 ); 
  (function(figure, material){  })( figure5d2f5584e6b611e6b1e007ba4b916aa0 , material7badc81ae6b611e69cc12b72c18ca176 ); 
  scene.add(figure5d2f5584e6b611e6b1e007ba4b916aa0); 
  var group20c55aece15e11e69b09a74605bb9055 = new THREE.Group(); 
  group20c55aece15e11e69b09a74605bb9055.position.set( 0.0 , 0.0 , 0.0 ); 
  group20c55aece15e11e69b09a74605bb9055.rotation.set( 0.0 , 0.0 , 0.0 ); 
  group20c55aece15e11e69b09a74605bb9055.scale.set( 1.0 , 1.0 , 1.0 ); 
  (function(figure){  })( group20c55aece15e11e69b09a74605bb9055 );  
  groupRoot.add(group20c55aece15e11e69b09a74605bb9055); 
  var params1743e5eaf2a911e69ed17714401e4924 = ["Test","1.0"]; 
   var figure1743e5eaf2a911e69ed17714401e4924 = (function(material, params){ var geometry = new THREE.SphereGeometry( 1, 32, 32 );
  var sphere = new THREE.Mesh( geometry, material );   
  return sphere;
   })( material4466976ede5111e6a5d3f3eee64202b6, params1743e5eaf2a911e69ed17714401e4924 ); 
  figure1743e5eaf2a911e69ed17714401e4924.position.set( 0.0 , 4.0 , 0.0 ); 
  figure1743e5eaf2a911e69ed17714401e4924.rotation.set( 0.0 , 0.0 , 0.0 ); 
  figure1743e5eaf2a911e69ed17714401e4924.scale.set( 1.0 , 1.0 , 1.0 ); 
  (function(figure, material){  })( figure1743e5eaf2a911e69ed17714401e4924 , material4466976ede5111e6a5d3f3eee64202b6 ); 
  group20c55aece15e11e69b09a74605bb9055.add(figure1743e5eaf2a911e69ed17714401e4924); 
  var entityCamera45d7b56aedf111e6be1d539a6d03a9c1 = (function(){ 
  var video = document.createElement( 'video' );
  video.id = 'VID_45d7b56a-edf1-11e6-be1d-539a6d03a9c1';
  video.src = "/video/sintel.ogv";
  video.loop = true;
  video.muted = true;
  video.load();
  video.play();
  var videoTexture = new THREE.VideoTexture( video );
  videoTexture.minFilter = THREE.LinearFilter;
  videoTexture.magFilter = THREE.LinearFilter;
  videoTexture.format = THREE.RGBFormat;
  var movieMaterial = new THREE.MeshBasicMaterial( { map: videoTexture, overdraw: true, side:THREE.FrontSide } ); 
  movieMaterial.side = THREE.BackSide;   
  var entityGroup = new THREE.Group(); 
  entityGroup.position.set( 0.0 , 0.0 , 0.0 ); 
  entityGroup.rotation.set( 0.0 , 1.57 , 0.0 ); 
  entityGroup.scale.set( 1.0 , 1.0 , 1.0 ); 
  var meshCamera = new THREE.Mesh( new THREE.ConeGeometry(1*0.5, 1, 4), new THREE.MeshBasicMaterial({color: 0xFF0000, wireframe: true}) );
  meshCamera.rotation.x = -Math.PI/2;
  meshCamera.scale.x = meshCamera.scale.y = meshCamera.scale.z = 0.35;
  entityGroup.add(meshCamera);
  var area_0 = [ new THREE.Vector2( 0.0 , 1.0 )
                                 , new THREE.Vector2( 0.5 , 1.0 )
                                 , new THREE.Vector2( 0.5 , 0.0 )
                                 , new THREE.Vector2( 0.0 , 0.0 )
                                 ];
  var movieGeometry_0 = new THREE.PlaneGeometry(2.5, 2.5);
  movieGeometry_0.faceVertexUvs[0][0] = [ area_0[0], area_0[3], area_0[1] ];
  movieGeometry_0.faceVertexUvs[0][1] = [ area_0[3], area_0[2], area_0[1] ];
  var movieScreen_0 = new THREE.Mesh( movieGeometry_0, movieMaterial );
  movieScreen_0.geometry.vertices[0].x = movieScreen_0.geometry.vertices[0].x + 0.0
  movieScreen_0.geometry.vertices[0].y = movieScreen_0.geometry.vertices[0].y + 0.0
  movieScreen_0.geometry.vertices[0].z = movieScreen_0.geometry.vertices[0].z + 0.0
  movieScreen_0.geometry.vertices[1].x = movieScreen_0.geometry.vertices[1].x + 0.0
  movieScreen_0.geometry.vertices[1].y = movieScreen_0.geometry.vertices[1].y + 0.0
  movieScreen_0.geometry.vertices[1].z = movieScreen_0.geometry.vertices[1].z + 0.0
  movieScreen_0.geometry.vertices[2].x = movieScreen_0.geometry.vertices[2].x + 0.0
  movieScreen_0.geometry.vertices[2].y = movieScreen_0.geometry.vertices[2].y + 0.0
  movieScreen_0.geometry.vertices[2].z = movieScreen_0.geometry.vertices[2].z + 0.0
  movieScreen_0.geometry.vertices[3].x = movieScreen_0.geometry.vertices[3].x + 0.0
  movieScreen_0.geometry.vertices[3].y = movieScreen_0.geometry.vertices[3].y + 0.0
  movieScreen_0.geometry.vertices[3].z = movieScreen_0.geometry.vertices[3].z + 0.0
  movieScreen_0.position.set( 0.0 , 0.0 , 3.0 ); 
  movieScreen_0.rotation.set( 0.0 , 0.0 , 1.57 ); 
  movieScreen_0.scale.set( 1.0 , 1.0 , 1.0 ); 
  entityGroup.add(movieScreen_0);
  var area_1 = [ new THREE.Vector2( 0.5 , 1.0 )
                                 , new THREE.Vector2( 1.0 , 1.0 )
                                 , new THREE.Vector2( 1.0 , 0.0 )
                                 , new THREE.Vector2( 0.5 , 0.0 )
                                 ];
  var movieGeometry_1 = new THREE.PlaneGeometry(2.5, 2.5);
  movieGeometry_1.faceVertexUvs[0][0] = [ area_1[0], area_1[3], area_1[1] ];
  movieGeometry_1.faceVertexUvs[0][1] = [ area_1[3], area_1[2], area_1[1] ];
  var movieScreen_1 = new THREE.Mesh( movieGeometry_1, movieMaterial );
  movieScreen_1.geometry.vertices[0].x = movieScreen_1.geometry.vertices[0].x + 0.0
  movieScreen_1.geometry.vertices[0].y = movieScreen_1.geometry.vertices[0].y + 0.0
  movieScreen_1.geometry.vertices[0].z = movieScreen_1.geometry.vertices[0].z + 0.0
  movieScreen_1.geometry.vertices[1].x = movieScreen_1.geometry.vertices[1].x + 0.0
  movieScreen_1.geometry.vertices[1].y = movieScreen_1.geometry.vertices[1].y + 0.0
  movieScreen_1.geometry.vertices[1].z = movieScreen_1.geometry.vertices[1].z + 0.0
  movieScreen_1.geometry.vertices[2].x = movieScreen_1.geometry.vertices[2].x + 0.0
  movieScreen_1.geometry.vertices[2].y = movieScreen_1.geometry.vertices[2].y + 0.0
  movieScreen_1.geometry.vertices[2].z = movieScreen_1.geometry.vertices[2].z + 0.0
  movieScreen_1.geometry.vertices[3].x = movieScreen_1.geometry.vertices[3].x + 0.0
  movieScreen_1.geometry.vertices[3].y = movieScreen_1.geometry.vertices[3].y + 0.0
  movieScreen_1.geometry.vertices[3].z = movieScreen_1.geometry.vertices[3].z + 0.0
  movieScreen_1.position.set( 0.0 , 3.0 , 4.0 ); 
  movieScreen_1.rotation.set( 0.0 , 0.0 , 1.57 ); 
  movieScreen_1.scale.set( 1.0 , 1.0 , 1.0 ); 
  entityGroup.add(movieScreen_1);
  group20c55aece15e11e69b09a74605bb9055.add(entityGroup); 
  return entityGroup; 
  })(); 
  var groupc34cbde4e7b911e6a0a36bff2604ce8f = new THREE.Group(); 
  groupc34cbde4e7b911e6a0a36bff2604ce8f.position.set( 0.0 , 0.0 , 0.0 ); 
  groupc34cbde4e7b911e6a0a36bff2604ce8f.rotation.set( 0.0 , 0.0 , 0.0 ); 
  groupc34cbde4e7b911e6a0a36bff2604ce8f.scale.set( 1.0 , 1.0 , 1.0 ); 
  (function(figure){  })( groupc34cbde4e7b911e6a0a36bff2604ce8f );  
  groupRoot.add(groupc34cbde4e7b911e6a0a36bff2604ce8f); 
  orbitControls = new THREE.OrbitControls(camera, renderer.domElement);
  orbitControls.addEventListener('change', render);
  orbitControls.target.set(0, 0, 0);
  orbitControls.update();
   (function(){ if(orbitControls){
      orbitControls.minDistance = 3;
      orbitControls.maxDistance = 20;
      orbitControls.minPolarAngle = 0; 
      orbitControls.maxPolarAngle = 1.50098;
  }
   })();  
  window.addEventListener( 'resize',onWindowResize,false );
  animate();
}
init();