WebGL 2D: простой как Web

web-standards-ru/cfp-list

Развитие за 9 лет

API не из Web

            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(this.gl.TEXTURE_2D, ..., image)
            gl.uniform1i(gl.getUniformLocation('u_image'), 0);
        

WebGL-2d

Canvas API -> WebGL

Как это выглядит

Алгоритм

• Берем пример рисования картинки на WebGL
• Создаем Canvas, рисуем картинку
• Подсовываем Canvas как текстуру

Самое важное

            const texture = gl.createTexture()
            const canvas = document.createElement('canvas')
             
            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(gl.TEXTURE_2D, ..., canvas)
        

Создание текстуры

            const texture = gl.createTexture()
            const canvas = document.createElement('canvas')
             
            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(gl.TEXTURE_2D, ..., canvas)
        

Canvas как текстура

            const texture = gl.createTexture()
            const canvas = document.createElement('canvas')
             
            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(gl.TEXTURE_2D, ..., canvas)
        

Первый шейдер

            uniform sampler2D u_background;
            varying vec2 v_texCoord;
             
            void main() {
              gl_FragColor = texture2D(u_background, v_texCoord);
            }
        

Больше картинок!

+ =

Уже знакомый код

            const texture = gl.createTexture()
            const canvas = document.createElement('canvas')
             
            gl.activeTexture(gl.TEXTURE0)
            gl.bindTexture(gl.TEXTURE_2D, texture)
            gl.texImage2D(gl.TEXTURE_2D, ..., canvas)
        

Создаем и храним ссылки на текстуры

            const textures = []
            function addTexture(canvas, name) {
              const texture = gl.createTexture()
              const location = gl.getUniformLocation(program, name)
              textures.push({texture, canvas, location})
            }
        

Обновляем текстуры

            textures.forEach(({texture, canvas, location}, i) => {
              gl.activeTexture(gl[`TEXTURE${i}`])
              gl.bindTexture(gl.TEXTURE_2D, texture)
              gl.texImage2D(this.gl.TEXTURE_2D, ..., canvas)
              gl.uniform1i(location, i);
            })
        

Активация текстурного блока

            textures.forEach(({texture, canvas, location}, i) => {
              gl.activeTexture(gl[`TEXTURE${i}`])
              gl.bindTexture(gl.TEXTURE_2D, texture)
              gl.texImage2D(this.gl.TEXTURE_2D, ..., canvas)
              gl.uniform1i(location, i);
            })
        

Передача Canvas

            textures.forEach(({texture, canvas, location}, i) => {
              gl.activeTexture(gl[`TEXTURE${i}`])
              gl.bindTexture(gl.TEXTURE_2D, texture)
              gl.texImage2D(this.gl.TEXTURE_2D, ..., canvas)
              gl.uniform1i(location, i);
            })
        

2 текстуры в шейдере

            uniform sampler2D u_background;
            uniform sampler2D u_foreground;
            varying vec2 v_texCoord;
            void main() {
              gl_FragColor = texture2D(u_background, v_texCoord)
                  + texture2D(u_foreground, v_texCoord);
            }
        

Evil Glitch

Про тег <script>

Но Webpack лучше

            rules: [
            ...
              {
                  test: /\.frag?$/,
                  use: 'raw-loader',
              }]
        

😍😍😍

            import * as fragmentShader from './shader.frag'
            import * as vertexShader from './shader.vert'
        

WebGL utils

            const shaders = [vertexShader, fragmentShader]
            const program = createProgramFromSources(gl, shaders)
        

Ссылки по шейдерам

• The Book of Shaders
• Shader Toy
• GL Sandbox

Демо

Что можно взять

• react-webgl либы
• inlet/react-pixi
• michalochman/react-pixi-fiber

Почему Pixi.js?

https://codesandbox.io/s/q7oj1p0jo6

Демо

React + Pixi.js?

            <Container>
                {state.enemies.map(enemy => (<Enemy {...enemy}/>))}
                {state.explosions.map(enemy => (<Explosion {...enemy}/>))}
                <Actor {...state.hero}/>
                <Header x={0} y={0} text={state.kills}/>
            <Container>
        

React + Pixi.js?

• Полная изоляция от WebGL API
• Можно использовать шейдеры
• Знакомый JSX

Ускоряет отрисовку?

• Для этого надо освоить пререндеринг
• ...и грамотно его применять
• Текст не будет рисоваться быстро

Эффекты?

• Надо освоить GLSL
• Стоит почитать теорию в The Book of Shaders
• Желательно увидеть больше примеров

Ссылки

• The Book of Shaders
• Shader Toy
• GL Sandbox
• Демка со слоями из canvas, репозиторий
• Демка c pixi-react-fiber, репозиторий