THREE.js custom shaders

by PhilQ

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/109/three.min.js"></script>
<script src="https://threejs.org/examples/js/libs/stats.min.js"></script>
<script id="vertexShader" type="x-shader/x-vertex">
	// attribute vec3 position;
	attribute vec4 color;
	// attribute vec2 uv;
	
	varying vec3 vPosition;
	varying vec4 vColor;
	varying vec2 vUv;
	
	void main()	{
		vPosition = position;
		vColor = color;
		vUv = uv;

		vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
		//gl_PointSize = size * ( 300.0 / -mvPosition.z );
		gl_Position = projectionMatrix * mvPosition;
	}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
	uniform float time;

	varying vec3 vPosition;
	varying vec4 vColor;
	varying vec2 vUv;

	void main()	{
		vec4 color = vec4( vColor );
		color.r += sin( vPosition.x * 10.0 + time ) * 0.5;
		
		gl_FragColor = color;
	}
</script>

<div id="container"></div>

JavaScript

var container, stats;
var camera, scene, renderer;

init();
animate();

function init() {
	container = document.getElementById( 'container' );
	
	camera = new THREE.PerspectiveCamera( 50, window.innerWidth / window.innerHeight, 1, 10 );
	camera.position.z = 2;
	
	scene = new THREE.Scene();
	scene.background = new THREE.Color( 0x101010 );	
	
	renderer = new THREE.WebGLRenderer({ antialias: true });
	renderer.setPixelRatio( window.devicePixelRatio );
	renderer.setSize( window.innerWidth, window.innerHeight );
	container.appendChild( renderer.domElement );
	
	stats = new Stats();
	container.appendChild( stats.dom );
	
	window.addEventListener( 'resize', onWindowResize, false );
	
	initMesh();
}

function onWindowResize() {
	camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize( window.innerWidth, window.innerHeight );
}

function animate() {
	render();
	stats.update();
	requestAnimationFrame( animate );
}


function initMesh() {
	// geometry
	
	var geometry = new THREE.BufferGeometry();
	
	var positions = [];
	var colors = [];
	var uvs = [];
	
	// nr of triangles with 3 vertices per triangle
	var vertexCount = 200 * 3;
	for ( var i = 0; i < vertexCount; i ++ ) {
		// adding x,y,z
		positions.push(
			Math.random() - 0.5,
			Math.random() - 0.5,
			Math.random() - 0.5
		);
		
		// adding r,g,b,a
		colors.push(
			Math.random() * 255,
			Math.random() * 255,
			Math.random() * 255,
			Math.random() * 255
		);
		
		uvs.push( 0.5, 0.5 );
	}
	var positionAttribute = new THREE.Float32BufferAttribute( positions, 3 );
	var colorAttribute = new THREE.Uint8BufferAttribute( colors, 4 );
	colorAttribute.normalized = true; // this will map the buffer values to 0.0f - +1.0f in the shader
	var uvAttribute = new THREE.Float32BufferAttribute( uvs, 2 );

	geometry.addAttribute( 'position', positionAttribute );
	geometry.addAttribute( 'color', colorAttribute );
	geometry.addAttribute( 'uv', uvAttribute );


	// material
	var...