WebGL: спиральный скроллинг

demosourse

Немного декоративных и завораживающих эффектов для фона на WebGL. Будем “скручивать” изображение по мере продвижения пользователя по странице.

Сегодня мы бы хотели продемонстрировать вам возможности WebGL. Предполагается, что данный пример будет работать как на ПК, так и на мобильных устройствах.

HTML / CSS структура

Давайте по-быстрому взглянем на HTML и CSS. Позиция элемента canvas зафиксирована т.к. мы будем расширять его на весь экран:

<body>
	<canvas id="webgl"></canvas>
	...
</body>

canvas#webgl {
	display: block;
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	z-index: -1;
}

WebGL

В данном примере мы работали с библиотекой regl, которая является обёрткой для WebGL. Если вы первый раз слышите о WebGL, то будьте уверены, что не потратите время даром. Эффекты реализуемые данной технологией того стоят.

Давайте взглянем на самые важные фрагменты кода.

GLSL

<script src="js/regl.min.js"></script>
<script type="x-shader/x-fragment" id="fragmentShader">
	#define TWO_PI 6.2831853072
#define PI 3.14159265359

// On iOS, specifying highp works more smoothly.
	precision highp float;

	uniform float globaltime;
	uniform vec2 resolution;
	uniform float aspect;
	uniform float scroll;
	uniform float velocity;

...
</script>

Инициализация regl в пределах canvas

var canvas = document.querySelector('#webgl');
var regl = createREGL({
	canvas: canvas,
	onDone: function(error, regl) {
		if (error) { alert(error); }
	}
});

Реализация команды regl

var draw = regl({
	// Fragment Shader
	frag: document.querySelector('#fragmentShader').textContent,
	// Vertex Shader
	vert:	'attribute vec2 position;
		void main() {
			gl_Position = vec4(3.0 * position, 0.0, 1.0);
		}',
	attributes: { position: [ [-1, 0], [0, -1], [1, 1] ] },
	count: 3,
	uniforms: {
		globaltime: regl.prop('globaltime'),
		resolution: regl.prop('resolution'),
		aspect: regl.prop('aspect'),
		scroll: regl.prop('scroll'),
		velocity: regl.prop('velocity')
	}
});

Данный GLSL код из скрипта элемента #fragmentShader.

Колбэк для каждого кадра

Код, запускающий процессы regl, помещён в колбэк-функцию. Также у нас есть переменные, где мы храним уровень прокрутки страницы.

Уровень прокрутки

Мы создали три переменные для хранения состояния прокрутки: scroll, velocity и lastScroll. Последняя может принимать значение от 0.0 до 1.0.

Значение velocity будет зависеть от направления и учитывать инерцию. При скроле вниз значение будет позитивным, а при прокрутке вверх — негативным. Значение 0.99 сохранит 99% скорости прокрутки предыдущего кадра. Ускорение рассчитывается как разница между scroll и lastScroll.

Надеемся, что вам понравился наш эксперимент с WebGL!

Данный урок подготовлен для вас командой сайта ruseller.com
Источник урока: https://tympanus.net/codrops/2017/04/26/webgl-scroll-spiral/
Перевел: Станислав Протасевич
Урок создан: 30 Апреля 2017
Просмотров: 7152
Правила перепечатки

5 последних уроков рубрики "CSS"

^ Наверх ^