Практическое применение WebGL

Василика Климова

Практическое
применение
WebGL

Василика Климова
Разработчик интерфейсов
Artec 3D

Artec Group

Artec 3D

Artec Group Artec Group

Shapify Booth

Artec Group

Содержание

Конструкторы

Интерактивные карты

rainforest.arkivert.no

Панорамы

yandex.ru

Mapbox GL JS

mapbox.com

Статистика

armsglobe.chromeexperiments.com

Unity 3D

http://unity3d.com/ru/unity/multiplatform

Blend4Web

blend4web.com

GL-React

projectseptemberinc.gitbooks.io

WebGL 1.0


Поддержка браузерами

Проверка поддержки WebGL

WebGL

+ + GLSL ES

Программа на WebGL

Точка

threejs.org/examples/#webgl_particles_shapes

Взаимосвязь

Взаимосвязь

Взаимосвязь

Взаимосвязь

Шейдеры

GLSL

Виды шейдеров

Растеризация


Типы данных

Типы классификаторов

Описатели/Шейдеры Вершинный Фрагментный
attribute READ -
uniform READ READ
varying READ/WRITE READ

Матрица Модели-Вида-Проекции

Вершинный шейдер

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

Фрагментный шейдер. Текстурирование

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

Материал из шейдера

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

Модель с текстурой

Черно-белый фильтр

      filter: grayscale(100%);
    

Черно-белый фильтр

Фрагментный шейдер. ЧБ текстура

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

Сепия

      float tone = 0.299 * col.r + 0.587 * col.g + 0.114 * 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;
    

Сепия

Отрисовка

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

Cartoon шейдер. Примеры

Cartoon шейдер. Код

      HueLevels[0] = 0.0; 
      HueLevels[1] = 80.0;  
      HueLevels[2] = 160.0;
      HueLevels[3] = 240.0;
      HueLevels[4] = 320.0;
      HueLevels[5] = 360.0;
      if (color == "Hue")
        for (int i = 0; i<HueLevCount-1; i++)
          if (col >= HueLevels[i] && col <= HueLevels[i+1])
            return HueLevels[i+1];
    

Постобработка

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

Отображение

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

Сцена с постобработкой

threejs.org/examples

Частицы

Сравнение визуализации частиц

Частицы

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

Частицы

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

Отладка

Преимущества WebGL

Недостатки

Практическое применение WebGL

Интерактивность

Курс WebGL

Полезные ссылки

Презентация

Василика Климова

likita
vasilika.klimova
lik04ka

Спасибо за внимание!

Fork me on Github