Artec 3D

• Artec 3D
• Shapify
• Viewshape

Shapify Booth

Contents

• WebGL
• Shading Language
• Texture filtering
• Postprocessing
• Particles
• Debug

Constructors

WebGL 1.0

• HTML5 <canvas>
• OpenGL ES 2.0
• GLSL ES 1.1
• 2D/3D

Browser Support

Check WebGL

WebGL

+

+

GLSL ES

Mesh

GLSL

• C Syntax
• Types
• Use GPU
• JS Strings
• Runtime

Shaders types

• Vertex shaders
• Fragment shaders

Rasterization

Primary data types

• bool
• int
• float
• vec2 / vec3 / vec4
• mat2 / mat3 / mat4
• sampler2D

Model-View-Projection Matrix

WebGL program

Just point

Vertex shader

      <script type="x-shader/x-vertex" id="vshader">  
        varying vec2 vUv;  
        void main() {  
          vUv = uv;
          vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 
          gl_Position = projectionMatrix * mvPosition;   
        }      
        </script>
      

Fragment shader. Texturing

      <script type="x-shader/x-fragment" id="fshader">  
        uniform sampler2D u_Sampler;
        varying vec2 vUv;
        void main() {
          gl_FragColor = texture2D(u_Sampler, vUv);    
        }
        </script>
    

Shader Material

      var vShader = document.getElementById("vshader").text;
      var fShader = document.getElementById("fshader").text;
      
        object.material = new THREE.ShaderMaterial({
           uniforms: {
              u_Sampler: {type: "t", value: texture}
           },
           vertexShader: vShader,
           fragmentShader: fShader,
        });
      
    

Model with texture

Black and white filter

Fragment shader. Black and white texture

      <script type="x-shader/x-fragment" id="fshader">  
      uniform sampler2D u_Sampler;
      varying vec2 vUv;
      void main() {
        vec4 color = texture2D(u_Sampler, vUv);
        color.rgb = vec3(color.r + color.g + color.b)/3.0;
        gl_FragColor = color;
      } </script>
    

Sepia

      float tone = 0.2126 * col.r + 0.7152 * col.g + 0.0722 * col.b;  
      col.r = (tone > (0.81)) ? 1.0 : tone + 0.19;
      col.g = (tone < (0.055)) ? 0.0 : tone - 0.055;
      col.b = (tone < (0.22)) ? 0.0 : tone - 0.22;
      gl_FragColor = col;
    

Sepia

Rendering

      renderer = new THREE.WebGLRenderer()
      animate();
      animate = function() {
         requestAnimationFrame(animate);
         renderer.render(scene, camera);
      }
    

Environment. Cube images

      const urls = [
        require('/posx.jpg'),
        require('/negx.jpg'),
        require('/posy.jpg'),
        require('/negy.jpg'),
        require('/posz.jpg'),
        require('/negz.jpg'),
      ];
    

Environment. Materials

      const materials = [];
      for (let i = 0, length = urls.length; i < length; i++) {
        materials.push(new THREE.MeshBasicMaterial({
          map: new THREE.TextureLoader().load(urls[i]),
          side: THREE.BackSide
        }));
      }
    

Environment. Cube

      const skybox = new THREE.Mesh(
        new THREE.CubeGeometry(7000, 7000, 7000),
        new THREE.MultiMaterial(materials)
      );
    

Postprocessing

      composer = new THREE.EffectComposer(renderer);
      composer.addPass( new THREE.RenderPass(scene, camera) );

      Toon = { uniforms: uniforms,
        vertexShader: vertexShader,
        fragmentShader: fragmentShader,
      };

      effect = new THREE.ShaderPass(Toon);
      effect.renderToScreen = true;
      composer.addPass(effect);
    

Render

        animate();
        animate: function() {
           requestAnimationFrame(animate);
           composer.render();
        }
    

Comparison of particle visualization

Particles

      particleObj = new THREE.ParticleSystem(geometry, material); 
      particleObj.position.set(0, 50, 0);  
      particleObj.dynamic = true;
      particleObj.sortParticles = true;
      scene.add( particleObj );
    

Debug

• Three.js Inspector
• WebGL-Inspector
• Mozilla Shader Editor

WebGL Advantages

• High GPU Performance
• No compilation
• Cross-platform
• Automatic memory management
• Open standard

Disadvantages

• Raster graphics
• Optimization required
• Poly-polygonal scenes

WebGL Practical Application

• Raster graphics rendering
• Image editing and analysis
• Filtering video
• Interactive graphics
• Games
• Statistics in the form of graphs

WebGL course

Useful links

• learningwebgl.com
• webglacademy.com
• davidscottlyons.com/threejs

Presentation