custom vertex attribute

buttons

by jmchen

HTML

<div id="info">Custom Vertex Attributes
  <br/>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r77/three.min.js"></script>
<script src="https://dl.dropboxusercontent.com/u/3587259/Code/Threejs/OrbitControls.js"></script>

		<script type="x-shader/x-vertex" id="vertexshader">

			uniform float amplitude;

			attribute float displacement;

			varying vec3 vNormal;
			varying vec2 vUv;

			void main() {

				vNormal = normal;
				vUv = ( 0.5 + amplitude ) * uv + vec2( amplitude );

				vec3 newPosition = position + amplitude * normal * vec3( displacement );
				gl_Position = projectionMatrix * modelViewMatrix * vec4( newPosition, 1.0 );

			}

		</script>

		<script type="x-shader/x-fragment" id="fragmentshader">

			varying vec3 vNormal;
			varying vec2 vUv;

			uniform vec3 color;
			uniform sampler2D texture;

			void main() {

				vec3 light = vec3( 0.5, 0.2, 1.0 );
				light = normalize( light );

				float dProd = dot( vNormal, light ) * 0.5 + 0.5;

				vec4 tcolor = texture2D( texture, vUv );
				vec4 gray = vec4( vec3( tcolor.r * 0.3 + tcolor.g * 0.59 + tcolor.b * 0.11 ), 1.0 );

				gl_FragColor = gray * vec4( vec3( dProd ) * vec3( color ), 1.0 );

			}

		</script>

CSS

#info {
  position: absolute;
  top: 2%;
  width: 100%;
  padding: 10px;
  text-align: center;
  color: #ffff00
}

body {
  overflow: hidden;
}

JavaScript

//
// reference: http://threejs.org/examples/webgl_custom_attributes.html
//

var renderer, scene, camera;
var sphere, uniforms;
var displacement, noise;
var controls;

init();
animate();

function init() {

  camera = new THREE.PerspectiveCamera(30, window.innerWidth / window.innerHeight, 1, 10000);
  camera.position.z = 300;

  scene = new THREE.Scene();
  
  THREE.ImageUtils.crossOrigin = '';
  uniforms = {

    amplitude: {
      type: "f",
      value: 1.0
    },
    color: {
      type: "c",
      value: new THREE.Color(0xff2200)
    },
    texture: {
      type: "t",
      value: THREE.ImageUtils.loadTexture("http://threejs.org/examples/textures/water.jpg")
    },

  };

  uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping;
 // uniforms.texture.value.minFilter = THREE.LinearFilter;

  var shaderMaterial = new THREE.ShaderMaterial({

    uniforms: uniforms,
    vertexShader: document.getElementById('vertexshader').textContent,
    fragmentShader: document.getElementById('fragmentshader').textContent

  });
	shaderMaterial.wireframe = true;

  var radius = 50,
    segments = 128,
    rings = 64;

  var geometry = new THREE.SphereBufferGeometry(radius, segments, rings);

  displacement = new Float32Array(geometry.attributes.position.count);
  noise = new Float32Array(geometry.attributes.position.count);

  for (var i = 0; i < displacement.length; i++) {

    noise[i] = Math.random() * 5;

  }

  geometry.addAttribute('displacement', new THREE.BufferAttribute(displacement, 1));

  sphere = new THREE.Mesh(geometry, shaderMaterial);
  scene.add(sphere);

  renderer = new THREE.WebGLRenderer();
  renderer.setClearColor(0x050505);
  renderer.setPixelRatio(window.devicePixelRatio);
  renderer.setSize(window.innerWidth, window.innerHeight);
  renderer.setClearColor (0x888888);
  
/*
  var container = document.getElementById('container');
  container.appendChild(renderer.domElement);

  stats = new Stats();
 ...