WebGL Practical Application

Vasilika Klimova


WebGL
Practical Application

Vasilika Klimova
Frontend Developer
Artec 3D

Artec 3D

Artec 3D

Artec Eva Artec Spider Artec Leo

Shapify Booth

Artec Group

Contents

Games

Abandoned Island

Navigation

bookcase.chromeexperiments.com

Constructors

Interactive maps

rainforest.arkivert.no

Panorama

yandex.ru

Mapbox GL JS

mapbox.com

Analytics

globe.chromeexperiments.com

Unity 3D

https://unity3d.com/unity/multiplatform

Blend4Web

blend4web.com

GL-React

projectseptemberinc.gitbooks.io

3D tour

3dvector-pro.ru

WebVR

archilogic.com

WebGL 1.0


Browser Support



Check WebGL

WebGL

+ + GLSL ES

3D basics

Connection

Mesh

Camera types

Perspective projection - PerspectiveCamera

Orthographic projection - OrthographicCamera

Shaders

GLSL

Shaders types

Rasterization


Primary data types

Qualifiers

Qualifiers/Shaders Vertex Fragment
attribute READ -
uniform READ READ
varying READ/WRITE READ

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

Black and white filter

      filter: grayscale(100%);
    

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

threejs.org/examples

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 scene

threejs.org/examples

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();
        }
    

Particles

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 );
    

Particles

http://oos.moxiecode.com/js_webgl/particles_morph/

Debug

WebGL Advantages

Disadvantages

WebGL Practical Application

Interactivity

WebGL course

Useful links

Presentation

Vasilika Klimova

likita
vasilika.klimova
lik04ka

Thank you for attention!

Fork me on Github