camera.position.set(0,0,4);   (line 44)
kubusM.position.set(-2,0,0);  (line 68)
sphereM.position.set(2,0,0);  (line 81)

rotaties uitgeschakeld (line 105 en 106)

Kleurverloop van de kubus loopt van rood (colorA)
naar groen (colorB) met vUv.x van -x --> +x
zie line 32 in HTML bestand
 
 
 
assenstelsel

 

 

 

sphereG = new THREE.SphereGeometry(1,20,5);
(line 79)
dus andere wireframe segmenten

shaders in three.js.                   terug naar de inleiding        ga naar de animatie in fullscreen

In de animatie wisselt de kleur van de bol en heeft de kubus twee kleuren die in elkaar overvloeien

dit dankzij de GLSL mix functies in de scripts in het html bestand (staat onder de schets) en de class ShaderMaterial (line 58 en 73).

Door shaders krijgt een pixel in een bepaalde positie, gedurende een bepaalde tijd, een bepaalde kleur dit mbv GLSL functies.

Deze functies worden uitgevoerd in de GPU's (Graphic Processing Unit) zo worden berekeningen aan pixels parallel uitgevoerd.

In createUniforms (line 48) worden de uniform constanten (tbv de GLSL functies) aangemaakt (hier kleuren)

De uniforms worden via ShaderMaterial (line 59 en 74) aan de GLSL functies in de scripts fragmentShader1 en 2 in het html bestand gegeven (line 61 en 76)

In deze scripts worden in line 32 en 44 de mix functies uitgevoerd.  gl_FragColor zorgt voor de kleurvariaties van de pixels.

Het vertexShader script (line 11 in het html bestand) zorgt er voor dat alleen pixels binnen de vorm de wisselende kleur krijgen, dit wordt verzorgd door de gl_position variabele

In dit script worden three.js variabelen gebruikt. De punten van de mesh worden berekend waarbinnen de glsl functies actief moeten zijn.
Dit door de posite van de mesh in de scene (modelViewMatrix) te vermenigvuldigen met de mesh (vec4(position), 1.0)
en dit weer vermenigvuldigen met de camera positie matrix (projectionMatrix).

Zo krijg je gl_position die varrieert met de camera bewegingen.

 

 

let container, scene, camera, ambient, uniforms; 
let loader, bgTextureLoader; 
let kubusM, kubusG, kubusMat; 
let sphereM, sphereG, sphereMat; 
 
  init(); 
  play(); 
  function init() { 
    createScenecontainer(); 
    createBackground(); 
  //  createGrid(); 
    createCamera(); 
    createUniforms(); 
    createBox(); 
    createSphere(); 
    createRenderer(); 
    onWindowResize(); 
    window.addEventListener( 'resize', onWindowResize ); 
} 
 
function createScenecontainer(){ 
  container = document.querySelector( '#scene-container' ); 
  scene = new THREE.Scene(); 
} 
 
function createBackground() { 
//  scene.background = new THREE.Color( 0x00000 ); 
   loader = new THREE.TextureLoader(); 
   bgTexture = loader.load('./textures/cloud.jpg'); 
   scene.background = bgTexture; 
 } 
 
function createGrid() { 
  const size = 10; 
  const divisions = 10; 
  const gridHelper = new THREE.GridHelper( size, divisions ); 
  gridHelper.rotation.x = Math.PI / 2;// het ruitjespapier 90 graden draaien 
  scene.add( gridHelper ); 
} 
 
function createCamera(){ 
  camera = new THREE.PerspectiveCamera( 70, container.clientWidth / container.clientHeight, 1, 100 ); 
  camera.position.set( 0, 0, 2 ); 
} 
// createBox en createSphere maken gebruik van de hier gecreerde uniforms 
// uniforms zijn de constanten tbv de glsl functies die door de GPU worden uitgevoerd 
 function createUniforms()  { 
      uniforms = { 
         colorA: {type: 'vec3', value: new THREE.Color(1.00,0.00,0.00)}, 
         colorB: {type: 'vec3', value: new THREE.Color(0.00,1.00,0.00)}, 
         colorC: {type: 'vec3', value: new THREE.Color(1.00,1.00,0.00)}, 
         u_time: {type: 'float',value: 1.0} 
     } 
  } 
 
function createBox() { 
   kubusMat = new THREE.ShaderMaterial ({ 
     uniforms: uniforms, 
     vertexShader: document.getElementById('vertexShader').textContent, 
     fragmentShader: document.getElementById('fragmentShader1').textContent, 
     //door onderstaande code toe te voegen werkt alpha in gl_FragColor 
     //de material zal mengen met de achtergrond en kan transparant worden 
     blending: THREE.NormalBlending, transparent: true 
   }); 
   kubusG = new THREE.BoxBufferGeometry(); 
   kubusM = new THREE.Mesh(kubusG, kubusMat); 
   kubusM.position.set(0,0,0); 
   scene.add(kubusM); 
} 
 
 function createSphere() { 
   sphereMat = new THREE.ShaderMaterial ({ 
      uniforms: uniforms, wireframe: true, wireframeLinewidth: 2, 
      vertexShader: document.getElementById('vertexShader').textContent, 
      fragmentShader: document.getElementById('fragmentShader2').textContent, 
      blending: THREE.NormalBlending, transparent: true 
    }); 
   sphereG = new THREE.SphereGeometry(1,50,50); 
   sphereM = new THREE.Mesh(sphereG, sphereMat); 
   sphereM.position.set(0,0,0); 
   scene.add(sphereM); 
} 
 
function createRenderer(){ 
   renderer = new THREE.WebGLRenderer(); 
   renderer.setPixelRatio( window.devicePixelRatio ); 
   renderer.setSize( container.clientWidth, container.clientHeight ); 
   document.body.appendChild( renderer.domElement ); 
   renderer.outputEncoding = THREE.sRGBEncoding; 
 } 
 
 function onWindowResize() { 
    camera.aspect = container.clientWidth / container.clientHeight; 
    camera.updateProjectionMatrix(); 
    renderer.setSize( container.clientWidth, container.clientHeight ); 
  } 
 
  function render() { 
    renderer.render( scene, camera ); 
} 
 
  function animate() { 
    uniforms.u_time.value += 0.02; 
    sphereM.rotation.y += 0.01; 
    sphereM.rotation.x += 0.01; 
    kubusM.rotation.y -= 0.01; 
    kubusM.rotation.x -= 0.01; 
 } 
 
 function play() { 
   renderer.setAnimationLoop( () => {animate();render();} ); 
 }
 
Het HTML bestand bevat drie glsl scripts 1) vertexShader (line 11),
                                                                  2) fragmentShader1 (line 24) tbv  box shaderMaterial
                                                                  3) fragmentShader2 (line 36) tbv sphere shaderMaterial
 
 

<html> 
  <head> 
    <title>De titel van de animatie</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link href="styles/main.css" rel="stylesheet" type="text/css"> 
    <meta charset="UTF-8" /> 
  </head> 
 
  <body>
<script id="vertexShader" type="x-shader/x-vertex"> 
    //Het script maakt gebruik van three.js variabelen om zo gl_Position te berekenen. 
    //gl_Position wordt gebruikt in de glsl functies om zo de pixels binnen de mesh te shaden 
    //gl_Position is genormaliseerd tussen [0,1] en varrieert met de camerapositie (projectionMatrix) 
            varying vec3 vUv; //is de positie van de x,y,z coordinaten 
        void main() { 
            vUv = position; 
// gl_Position is een vec4 datatype en position een vec3 datatype, 1.0 is de vierde component 
            vec4 modelViewPosition = modelViewMatrix * vec4(position, 1.0); 
            gl_Position = projectionMatrix * modelViewPosition; 
        } 
    </script> 
 
    <script id="fragmentShader1" type="x-shader/x-fragment"> 
        uniform vec3 colorA; 
        uniform vec3 colorB; 
        varying vec3 vUv; 
 
     void main(){ 
    //vUv is hier nodig om de overgang tussen de twee kleuren aan te geven 
    //Hier de x as dus de kleur gaat in x richting over van colorA in colorB 
      gl_FragColor = vec4(mix(colorA, colorB, vUv.x),0.5); //0.5 is de alpha waarde van de kleur 
  } 
    </script> 
 
    <script id="fragmentShader2" type="x-shader/x-fragment"> 
        uniform vec3 colorA; 
        uniform vec3 colorC; 
        uniform float u_time; 
        varying vec3 vUv; 
 
     void main(){ 
        float pct = abs(sin(u_time)); 
        gl_FragColor = vec4(mix(colorA, colorC, pct), 0.8);//0.8 is de alpha waarde van de kleur 
  } 
    </script> 
    <div id="scene-container"</div> 
    <script src="./build/three.js"></script> 
    <script src="./schetsen/de_schets.js"></script> 
  </body> 
</html>