Minimal GLSL

by jason870509

HTML

<div id="info">Minimal GLSL</div>
<script src="https://threejs.org/build/three.min.js"></script>
<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>


<script id="myVertexShader" type="x-shader/x-vertex">
  //uniform float tt;
  //varying vec3 mycolor;
    varying vec4 myeyepos;
    varying vec4 worldpos;
    varying vec3 mypos;
    void main() {
    	  mypos = position;
        //mypos.z = 2.0*sin(.5*mypos.x + tt);
				//vec4 eyepos = modelViewMatrix * vec4 (mypos, 1.0);
        gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
       	worldpos = modelMatrix * vec4(position, 1.0);
        myeyepos = modelViewMatrix * vec4(position, 1.0);
          /*if(mypos.x > 0.0)
            mycolor = vec3 (1, 0, 0);
          else 
            mycolor = vec3 (0, 1, 0);*/
        	
    }
</script>
<script id="myFragmentShader" type="x-shader/x-fragment">
  	varying vec4 myeyepos;
    varying vec4 worldpos;
    varying vec3 mypos;
    //varying vec3 mycolor;
    void main() {
    			vec3 mycolor;
          if(myeyepos.x > 0.0)
            mycolor = vec3 (1, 0, 0);
          else 
            mycolor = vec3 (0, 1, 0);
        	gl_FragColor = vec4 (mycolor, 1.0);
    }
</script>

CSS

body {
  background-color: #fff;
  color: #111;
  margin: 0px;
  overflow: hidden;
  font-family: Monospace;
  font-size: 10px;
  position: absolute;
}

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

JavaScript

var scene, renderer, camera;
var meshMaterial, mesh;

init();
animate();

function init() {
  var width = window.innerWidth;
  var height = window.innerHeight;

  renderer = new THREE.WebGLRenderer({
    antialias: true
  });
  renderer.setSize(width, height);
  document.body.appendChild(renderer.domElement);
  renderer.setClearColor(0x888888);

  scene = new THREE.Scene();

  camera = new THREE.PerspectiveCamera(45, width / height, 1, 1000);
  camera.position.set(0, 160, 400);

  let controls = new THREE.OrbitControls(camera, renderer.domElement);

  var gridXZ = new THREE.GridHelper(200, 20, 'red', 'white');
  scene.add(gridXZ);
  /////////////////////////////////////////////////////////////
  meshMaterial = new THREE.ShaderMaterial({
    uniforms: {
      'mycolor': {
        type: 'v3',
        value: new THREE.Vector3(1, 0, 0)
      }
    },
    vertexShader: document.getElementById('myVertexShader').textContent,
    fragmentShader: document.getElementById('myFragmentShader').textContent
  });

  var geometry = new THREE.TorusKnotGeometry(20, 5, 100, 16);
  mesh = new THREE.Mesh(geometry, meshMaterial);
  scene.add(mesh);
}
var angle = 0;
function animate() {
  requestAnimationFrame(animate);
  render();
	//mesh.position.x = angle;
  angle += 0.01
  // meshMaterial.uniforms.tt.value += .1;
}

function render() {
  renderer.render(scene, camera);
}