nulltask/theta-s.html

## theta-s.html

<style>
  body { margin: 0; }
  video { position: fixed; bottom: 10px; right: 10px }
</style>

<body>

<video src="media/daichi.mp4" autoplay controls loop width="320"></video>

<script src="javascripts/three.js"></script>
<script src="javascripts/DeviceOrientationControls.js"></script>

<script type="x-shader/x-vertex">
varying vec2 texCoordVarying;

void main() {
  texCoordVarying = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}
</script>

<script type="x-shader/x-fragment">
// based on ThetaShaderPack_20150926 (http://stereoarts.jp/) written by Nora.

#define PI 3.14159265358979
// #define _THETA_S_Y_SCALE	(640.0 / 720.0)
#define _THETA_S_Y_SCALE 1.0

uniform sampler2D mainTex;
uniform float radius; // 0.445
uniform vec4 uvOffset;  // 0, 0, 0, 0

varying vec2 texCoordVarying;

// out vec4 fragColor;

void main (void) {
    vec2 revUV = texCoordVarying.st;
    if (texCoordVarying.x <= 0.5) {
        revUV.x = revUV.x * 2.0;
    } else {
        revUV.x = (revUV.x - 0.5) * 2.0;
    }

    revUV *= PI;

    vec3 p = vec3(cos(revUV.x), cos(revUV.y), sin(revUV.x));
    p.xz *= sqrt(1.0 - p.y * p.y);

    float r = 1.0 - asin(p.z) / (PI / 2.0);
    vec2 st = vec2(p.y, p.x);

    st *= r / sqrt(1.0 - p.z * p.z);
    st *= radius;
    st += 0.5;

    if (texCoordVarying.x <= 0.5) {
        st.x *= 0.5;
        st.x += 0.5;
        st.y = 1.0 - st.y;
        st.xy += uvOffset.wz;
    } else {
        st.x = 1.0 - st.x;
        st.x *= 0.5;
        st.xy += uvOffset.yx;
    }

    st.y = st.y * _THETA_S_Y_SCALE;

    gl_FragColor = texture2D(mainTex, st);
}
</script>


<script>
  var lat = 0;
  var lon = 0;
  var theta = 0;
  var phi = 0;

  var scene = new THREE.Scene();
  var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
  camera.target = new THREE.Vector3( 0, 0, 0 );

  controls = new THREE.DeviceOrientationControls( camera );

  var renderer = new THREE.WebGLRenderer();
  renderer.setPixelRatio( window.devicePixelRatio );
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor( 0x0000ff );

  document.body.appendChild(renderer.domElement);

  var video = document.querySelector('video');
  var texture = new THREE.VideoTexture(video);
  texture.minFilter = THREE.LinearFilter;
  texture.magFilter = THREE.LinearFilter;
  texture.format = THREE.RGBFormat;
  texture.needsUpdate = true;

  var uniforms = {
    mainTex: { type: 't', value: texture },
    radius: { type: 'f', value: 0.445 },
    uvOffset: { type: 'v4', value: new THREE.Vector4(0, 0, 0, 0) }
  };

  var geometry = new THREE.SphereGeometry( 500, 60, 40 );
  geometry.scale(-1, -1, 1);

  var material = new THREE.ShaderMaterial({
    uniforms: uniforms,
    vertexShader: document.querySelector('[type="x-shader/x-vertex"]').textContent,
    fragmentShader: document.querySelector('[type="x-shader/x-fragment"]').textContent,
    side: THREE.DoubleSide
	});

  var mesh = new THREE.Mesh(geometry, material);

  scene.add(mesh);


  function animate() {
    requestAnimationFrame(animate);
    update();
  }

  function update() {
    lon += 0.25;
    lat = Math.max( - 85, Math.min( 85, lat ) );
    phi = THREE.Math.degToRad( 90 - lat );
    theta = THREE.Math.degToRad( lon );

    camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
    camera.target.y = 500 * Math.cos( phi );
    camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

    mesh.rotation.x += 0.005;
    mesh.rotation.y += 0.005;
    mesh.rotation.z += 0.005;

    camera.lookAt( camera.target );

    renderer.render( scene, camera );
  }

  animate();
</script>

	<style>
	body { margin: 0; }
	video { position: fixed; bottom: 10px; right: 10px }
	</style>

	<body>

	<video src="media/daichi.mp4" autoplay controls loop width="320"></video>

	<script src="javascripts/three.js"></script>
	<script src="javascripts/DeviceOrientationControls.js"></script>

	<script type="x-shader/x-vertex">
	varying vec2 texCoordVarying;

	void main() {
	texCoordVarying = uv;
	gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
	}
	</script>

	<script type="x-shader/x-fragment">
	// based on ThetaShaderPack_20150926 (http://stereoarts.jp/) written by Nora.

	#define PI 3.14159265358979
	// #define _THETA_S_Y_SCALE (640.0 / 720.0)
	#define _THETA_S_Y_SCALE 1.0

	uniform sampler2D mainTex;
	uniform float radius; // 0.445
	uniform vec4 uvOffset; // 0, 0, 0, 0

	varying vec2 texCoordVarying;

	// out vec4 fragColor;

	void main (void) {
	vec2 revUV = texCoordVarying.st;
	if (texCoordVarying.x <= 0.5) {
	revUV.x = revUV.x * 2.0;
	} else {
	revUV.x = (revUV.x - 0.5) * 2.0;
	}

	revUV *= PI;

	vec3 p = vec3(cos(revUV.x), cos(revUV.y), sin(revUV.x));
	p.xz = sqrt(1.0 - p.y p.y);

	float r = 1.0 - asin(p.z) / (PI / 2.0);
	vec2 st = vec2(p.y, p.x);

	st = r / sqrt(1.0 - p.z p.z);
	st *= radius;
	st += 0.5;

	if (texCoordVarying.x <= 0.5) {
	st.x *= 0.5;
	st.x += 0.5;
	st.y = 1.0 - st.y;
	st.xy += uvOffset.wz;
	} else {
	st.x = 1.0 - st.x;
	st.x *= 0.5;
	st.xy += uvOffset.yx;
	}

	st.y = st.y * _THETA_S_Y_SCALE;

	gl_FragColor = texture2D(mainTex, st);
	}
	</script>


	<script>
	var lat = 0;
	var lon = 0;
	var theta = 0;
	var phi = 0;

	var scene = new THREE.Scene();
	var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 1100 );
	camera.target = new THREE.Vector3( 0, 0, 0 );

	controls = new THREE.DeviceOrientationControls( camera );

	var renderer = new THREE.WebGLRenderer();
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setClearColor( 0x0000ff );

	document.body.appendChild(renderer.domElement);

	var video = document.querySelector('video');
	var texture = new THREE.VideoTexture(video);
	texture.minFilter = THREE.LinearFilter;
	texture.magFilter = THREE.LinearFilter;
	texture.format = THREE.RGBFormat;
	texture.needsUpdate = true;

	var uniforms = {
	mainTex: { type: 't', value: texture },
	radius: { type: 'f', value: 0.445 },
	uvOffset: { type: 'v4', value: new THREE.Vector4(0, 0, 0, 0) }
	};

	var geometry = new THREE.SphereGeometry( 500, 60, 40 );
	geometry.scale(-1, -1, 1);

	var material = new THREE.ShaderMaterial({
	uniforms: uniforms,
	vertexShader: document.querySelector('[type="x-shader/x-vertex"]').textContent,
	fragmentShader: document.querySelector('[type="x-shader/x-fragment"]').textContent,
	side: THREE.DoubleSide
	});

	var mesh = new THREE.Mesh(geometry, material);

	scene.add(mesh);


	function animate() {
	requestAnimationFrame(animate);
	update();
	}

	function update() {
	lon += 0.25;
	lat = Math.max( - 85, Math.min( 85, lat ) );
	phi = THREE.Math.degToRad( 90 - lat );
	theta = THREE.Math.degToRad( lon );

	camera.target.x = 500 * Math.sin( phi ) * Math.cos( theta );
	camera.target.y = 500 * Math.cos( phi );
	camera.target.z = 500 * Math.sin( phi ) * Math.sin( theta );

	mesh.rotation.x += 0.005;
	mesh.rotation.y += 0.005;
	mesh.rotation.z += 0.005;

	camera.lookAt( camera.target );

	renderer.render( scene, camera );
	}

	animate();
	</script>