l3kn/shader.html

## shader.html
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
  <style>
    body {
      margin: 0px;
      overflow: hidden;
    }
  </style>
</head>
<body>
<div id="container"></div>
<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>

<script id="vertexShader" type="x-shader/x-vertex">
  uniform float time;
  uniform vec2 resolution;
  void main()  {
    gl_Position = vec4( position, 1.0 );
  }
</script>

<script>
  var id = null;
  var scene = null;
  var mesh = null;
  var container;
  var camera, renderer;
  var uniforms, material;
  var mouseX = 0, mouseY = 0,
  lat = 0, lon = 0, phy = 0, theta = 0;

  var windowHalfX = window.innerWidth / 2;
  var windowHalfY = window.innerHeight / 2;

  var ws = new WebSocket("ws://10.23.42.210:1880/ws/shader");
  var startTime = Date.now();
  setup();
  ws.onmessage = function (event) {
    if (id != null) {
      cancelAnimationFrame( id );
    }
    if (scene != null) {
      if (mesh != null) {
        console.log("yolo");
        scene.remove(mesh);
      }
    }
    var payload = event.data;
    init(payload);
    animate();
  }

  function setup() {
    container = document.getElementById( 'container' );

    camera = new THREE.Camera();
    camera.position.z = 1;
    scene = new THREE.Scene();

    uniforms = {
      time: { type: "f", value: 1.0 },
      resolution: { type: "v2", value: new THREE.Vector2() }
    };

    uniforms.resolution.value.x = window.innerWidth;
    uniforms.resolution.value.y = window.innerHeight;

    renderer = new THREE.WebGLRenderer();
    container.appendChild( renderer.domElement );

    renderer.setSize( window.innerWidth, window.innerHeight );
  }

  function init(fragmentShaderText) {
    material = new THREE.ShaderMaterial( {
      uniforms: uniforms,
      vertexShader: document.getElementById( 'vertexShader' ).textContent,
      fragmentShader: fragmentShaderText
    });

    mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
    scene.add( mesh );
  }

  function animate() {
    id = requestAnimationFrame( animate );
    render();
  }

  function render() {
    var elapsedMilliseconds = Date.now() - startTime;
    var elapsedSeconds = elapsedMilliseconds / 1000.;
    uniforms.time.value = 60. * elapsedSeconds;
    renderer.render( scene, camera );
  }
</script>
</body>
</html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
	<style>
	body {
	margin: 0px;
	overflow: hidden;
	}
	</style>
	</head>
	<body>
	<div id="container"></div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/three.js/r61/three.min.js"></script>

	<script id="vertexShader" type="x-shader/x-vertex">
	uniform float time;
	uniform vec2 resolution;
	void main() {
	gl_Position = vec4( position, 1.0 );
	}
	</script>

	<script>
	var id = null;
	var scene = null;
	var mesh = null;
	var container;
	var camera, renderer;
	var uniforms, material;
	var mouseX = 0, mouseY = 0,
	lat = 0, lon = 0, phy = 0, theta = 0;

	var windowHalfX = window.innerWidth / 2;
	var windowHalfY = window.innerHeight / 2;

	var ws = new WebSocket("ws://10.23.42.210:1880/ws/shader");
	var startTime = Date.now();
	setup();
	ws.onmessage = function (event) {
	if (id != null) {
	cancelAnimationFrame( id );
	}
	if (scene != null) {
	if (mesh != null) {
	console.log("yolo");
	scene.remove(mesh);
	}
	}
	var payload = event.data;
	init(payload);
	animate();
	}

	function setup() {
	container = document.getElementById( 'container' );

	camera = new THREE.Camera();
	camera.position.z = 1;
	scene = new THREE.Scene();

	uniforms = {
	time: { type: "f", value: 1.0 },
	resolution: { type: "v2", value: new THREE.Vector2() }
	};

	uniforms.resolution.value.x = window.innerWidth;
	uniforms.resolution.value.y = window.innerHeight;

	renderer = new THREE.WebGLRenderer();
	container.appendChild( renderer.domElement );

	renderer.setSize( window.innerWidth, window.innerHeight );
	}

	function init(fragmentShaderText) {
	material = new THREE.ShaderMaterial( {
	uniforms: uniforms,
	vertexShader: document.getElementById( 'vertexShader' ).textContent,
	fragmentShader: fragmentShaderText
	});

	mesh = new THREE.Mesh( new THREE.PlaneGeometry( 2, 2 ), material );
	scene.add( mesh );
	}

	function animate() {
	id = requestAnimationFrame( animate );
	render();
	}

	function render() {
	var elapsedMilliseconds = Date.now() - startTime;
	var elapsedSeconds = elapsedMilliseconds / 1000.;
	uniforms.time.value = 60. * elapsedSeconds;
	renderer.render( scene, camera );
	}
	</script>
	</body>
	</html>