Init commit

McWoahs · Sep 20, 2018 · a0fc792 · a0fc792
commit a0fc792
Show file tree

Hide file tree

Showing 36 changed files with 2,704 additions and 0 deletions.
diff --git a/assets/metallic.jpg b/assets/metallic.jpg
diff --git a/assets/normal.jpg b/assets/normal.jpg
diff --git a/assets/nx (1).jpg b/assets/nx (1).jpg
diff --git a/assets/nx.jpg b/assets/nx.jpg
diff --git a/assets/nx_3js.jpg b/assets/nx_3js.jpg
diff --git a/assets/ny.jpg b/assets/ny.jpg
diff --git a/assets/ny_3js.jpg b/assets/ny_3js.jpg
diff --git a/assets/nz.jpg b/assets/nz.jpg
diff --git a/assets/nz_3js.jpg b/assets/nz_3js.jpg
diff --git a/assets/px.jpg b/assets/px.jpg
diff --git a/assets/px_3js.jpg b/assets/px_3js.jpg
diff --git a/assets/py.jpg b/assets/py.jpg
diff --git a/assets/py_3js (1).jpg b/assets/py_3js (1).jpg
diff --git a/assets/py_3js.jpg b/assets/py_3js.jpg
diff --git a/assets/pz.jpg b/assets/pz.jpg
diff --git a/assets/pz_3js.jpg b/assets/pz_3js.jpg
diff --git a/assets/roughness.jpg b/assets/roughness.jpg
diff --git a/assets/sprite_additive_rect.png b/assets/sprite_additive_rect.png
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,32 @@
+body{
+  min-width: 1024px;
+  overflow: hidden;
+  margin: 0px;
+  padding: 0px;
+  background: #000;
+  font-family: Helvetica, arial, sans-serif;
+}   
+canvas{
+  position: fixed;
+  left: 0px;
+  top: 0px;
+  width: 100%; 
+  height: 100%;
+}
+
+::-webkit-scrollbar {
+  width: 2px;
+}
+::-webkit-scrollbar-track {
+  border-radius: 2px;
+  background: #333;
+}
+::-webkit-scrollbar-thumb {
+  border-radius: 2px;
+  background: #999; 
+}
+::-webkit-scrollbar-thumb:window-inactive {
+  background: #999; 
+}
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,31 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
+        <!--css-->
+        <link rel="stylesheet" type="text/css" href="css/style.css">
+        <!--libraries-->
+        <script type="text/javascript" src="js/three.min.js"></script>
+        <script type="text/javascript" src="js/dat.gui.min.js"></script>
+        <!--tools-->
+        <script type="text/javascript" src="js/AudioAnalyzer.js"></script>
+        <script type="text/javascript" src="js/ThreeSharedRenderer.js"></script>
+        <script type="text/javascript" src="js/ThreePBR.js"></script>
+        <script type="text/javascript" src="js/ThreePointLight.js"></script>
+        <script type="text/javascript" src="js/DeviceChecker.js"></script>
+        <!--shaders-->
+        <script type="text/javascript" src="shaders/blob.vert.js"></script>
+        <script type="text/javascript" src="shaders/blob.frag.js"></script>
+        <script type="text/javascript" src="shaders/skybox.vert.js"></script>
+        <script type="text/javascript" src="shaders/skybox.frag.js"></script>
+        <!--objects-->
+        <script type="text/javascript" src="js/NoiseBlob.js"></script>
+        <script type="text/javascript" src="js/Ctrl.js"></script>
+        <!--main-->
+        <script type="text/javascript" src="js/script.js"></script>
+    </head>
+    <body>
+        <canvas></canvas>
+    </body>
+</html>
diff --git a/js/AudioAnalyzer.js b/js/AudioAnalyzer.js
@@ -0,0 +1,189 @@
+var AudioAnalyzer = function(){
+  this.is_init = false;
+  this.is_pulse = false;
+
+  navigator.getUserMedia = (
+      navigator.getUserMedia ||
+      navigator.webkitGetUserMedia ||
+      navigator.mozGetUserMedia ||
+      navigator.msGetUserMedia);
+
+  if (navigator.getUserMedia) {
+      console.log('getUserMedia supported.');
+      navigator.getUserMedia ({
+          audio: true
+      }, this.init.bind(this),
+      this.init_without_stream.bind(this));
+  } else {
+      if(window.location.protocol == 'https:')
+          this.init_without_stream();
+      console.log('getUserMedia not supported on your browser!');
+  }
+};
+
+AudioAnalyzer.prototype.init = function(_stream){
+  var _ctx = new (
+      window.AudioContext || 
+      window.webkitAudioContext || 
+      window.mozAudioContext || 
+      window.msAudioContext)();
+
+  var _source = _ctx.createMediaStreamSource(_stream);
+
+  // https://developer.mozilla.org/en-US/docs/Web/API/AnalyserNode
+  this.analyzer = _ctx.createAnalyser();
+  this.analyzer.fftSize = 128;
+
+  this.gain = _ctx.createGain();
+  _source.connect(this.gain);
+  this.gain.connect(this.analyzer);
+  this.gain.gain.value = 70.;
+
+  this.bass = 0.;
+  this.mid = 0.;
+  this.high = 0.;
+  this.level = 0.;
+
+  this.frame = 0;
+
+  this.reset_history();
+
+  this.buffer_length = this.analyzer.frequencyBinCount;
+  this.audio_buffer = new Uint8Array(this.buffer_length);
+
+  console.log("audio analyzer is init");
+
+  this.is_init = true;
+};
+
+AudioAnalyzer.prototype.init_without_stream = function(){
+  alert("microphone is not detected. pulse is activated instead of mic input");
+
+  this.bass = 0.;
+  this.mid = 0.;
+  this.high = 0.;
+  this.level = 0.;
+
+  this.frame = 0;
+
+  this.reset_history();
+
+  console.log("audio analyzer is init without mic");
+
+  this.is_init = true;
+  this.is_pulse = true;
+};
+
+AudioAnalyzer.prototype.update = function(){   
+  if(this.is_init){
+      var _bass = 0., _mid = 0., _high = 0.;
+
+      if(!this.is_pulse){
+          this.analyzer.getByteFrequencyData(this.audio_buffer);
+
+          var _pass_size = this.buffer_length/3.;
+          for(var i = 0; i < this.buffer_length; i++){
+              var _val = Math.pow(this.audio_buffer[i] / 256., 2.);
+
+              if(i < _pass_size)
+                  _bass += _val;
+              else if(i >= _pass_size && i < _pass_size*2)
+                  _mid += _val;
+              else if(i >= _pass_size*2)
+                  _high += _val;  
+          }
+
+          _bass /= _pass_size;
+          _mid /= _pass_size;
+          _high /= _pass_size;
+      } else {
+          if(this.frame % 40 == (Math.floor(Math.random()*40.))){
+              _bass = Math.random();
+              _mid = Math.random();
+              _high = Math.random();
+          }
+      }
+
+      this.bass = this.bass > _bass ? this.bass * .96 : _bass;
+      this.mid = this.mid > _mid ? this.mid * .96 : _mid;
+      this.high = this.high > _high ? this.high * .96 : _high;
+
+      this.level = (this.bass + this.mid + this.high)/3.;
+
+      this.history += this.level * .01 + .005; 
+  }
+
+  this.frame++;
+};
+
+AudioAnalyzer.prototype.reset_history = function(){
+  this.history = 0.;
+};
+
+AudioAnalyzer.prototype.set_gain = function(_val){
+  if(this.gain)
+      this.gain.gain.value = _val;
+};
+
+AudioAnalyzer.prototype.get_gain = function(){
+  if(this.gain)
+      this.gain.gain.value;
+};
+
+AudioAnalyzer.prototype.get_bass = function(){
+  return this.bass == undefined ? 0. : this.bass;
+};
+
+AudioAnalyzer.prototype.get_mid = function(){
+  return this.mid == undefined ? 0. : this.mid;
+};
+
+AudioAnalyzer.prototype.get_high = function(){
+  return this.high == undefined ? 0. : this.high;
+};
+
+AudioAnalyzer.prototype.get_level = function(){
+  return this.level == undefined ? 0. : this.level;
+};
+
+AudioAnalyzer.prototype.get_history = function(){
+  return this.history == undefined ? 0. : this.history;
+};
+
+AudioAnalyzer.prototype.trigger_pulse = function(_is_pulse){
+  this.is_pulse = _is_pulse;
+};
+
+AudioAnalyzer.prototype.debug = function(_canvas){
+  var _ctx = _canvas.getContext("2d");
+
+  _ctx.fillStyle = 'rgb(0, 0, 0)';
+  _ctx.fillRect(0, 0, _canvas.width, _canvas.height);
+
+  var _w = (_canvas.width / this.buffer_length);
+  var _h;
+  var _x = 0;
+
+  _x = 0;
+  _w = (_canvas.width / 4.);
+
+  _h = this.bass * _canvas.height;
+  _ctx.fillStyle = 'rgb(200,0,0)';
+  _ctx.fillRect(_x,_canvas.height-_h,_w,_h);
+  _x += _w;
+
+  _h = this.mid * _canvas.height;
+  _ctx.fillStyle = 'rgb(0,200,0)';
+  _ctx.fillRect(_x,_canvas.height-_h,_w,_h);
+  _x += _w;
+
+  _h = this.high * _canvas.height;
+  _ctx.fillStyle = 'rgb(0,0,200)';
+  _ctx.fillRect(_x,_canvas.height-_h,_w,_h);
+  _x += _w;
+
+  _h = this.level * _canvas.height;
+  _ctx.fillStyle = 'rgb(200,200,200)';
+  _ctx.fillRect(_x,_canvas.height-_h,_w,_h);
+  _x += _w;
+};
diff --git a/js/Ctrl.js b/js/Ctrl.js
@@ -0,0 +1,45 @@
+// need datgui lib & threejs lib
+
+var Ctrl = function(_blob, _light, _pbr, _audio){
+	this.params = {
+		show_hdr: true,
+		debug_shadow_map: false,
+		cam_ziggle: true,
+		light_ziggle: true,
+		audio_gain: 70.
+	}
+
+	// var _g_blob = new dat.GUI();
+	var _g_scene = new dat.GUI();
+
+	this.blob = _blob;
+	this.light = _light;
+	this.pbr = _pbr;
+	this.audio = _audio;
+
+    // _g_scene.add(this.params, 'debug_shadow_map').onFinishChange( this.update_params.bind(this) );
+
+    // _g_scene.add(this.params, 'cam_ziggle');
+    // _g_scene.add(this.params, 'light_ziggle');
+    _g_scene.add(this.params, 'audio_gain', 0., 500.).onChange( this.update_params.bind(this) );
+    _g_scene.add(this.audio, 'is_pulse');
+    _g_scene.add(this.blob, 'show_hdr').onFinishChange( this.blob.toggle_cubemap.bind(this.blob) );
+
+    // _g_blob.add(this.pbr, 'normal', 0., 5.);
+    // _g_blob.add(this.pbr, 'roughness', 0., 10.);
+    // _g_blob.add(this.pbr, 'metallic', 0., 10.);
+    // _g_blob.add(this.pbr, 'exposure', 0., 20.);
+    // _g_blob.add(this.pbr, 'gamma', 0., 10.);
+
+    this.update_params();
+
+    // dat.GUI.toggleHide();
+};
+
+Ctrl.prototype.update_params = function(){
+	var _p = this.params;
+
+	this.blob.debug_shadow_map(_p.debug_shadow_map);
+	this.audio.set_gain(this.params.audio_gain);
+	this.light.set_light_pos( new THREE.Vector3(_p.light_posx, _p.light_posy, _p.light_posz) );
+};
diff --git a/js/DeviceChecker.js b/js/DeviceChecker.js