Современные информационные технологии. 4 курс. Лабораторное занятие №2. Шейдер на GLSL

февраля 11, 2021

Современные информационные технологии. 4 курс. Лабораторное занятие №2. Шейдер на GLSL

Для создания шейдера с динамическим фоном вам потребуется:
CSS, JavaScript, HTML, а также исходник графики для шейдера в репозитории.

Часть I. Стили страницы в CSS:
1) Указываем фоновый шрифт и позицию фона:

@import url("https://fonts.googleapis.com/css?family=Homenaje");
.p-canvas-webgl {
position: fixed;
z-index: 1;
top: 0;
left: 0;
}

2) Ширину и высоту, а также выравнивание шейдера:

.p-summary {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
left: 0;
z-index: 2;
color: #fff;
font-family: 'Homenaje', sans-serif;
text-align: center;
}

3) Стиль заголовка:

.p-summary h1 {
margin: 0 0 0.1em;
font-size: 18vh;
font-weight: 400;
}

4) Стиль абзацев:

.p-summary p {
margin: 0;
font-size: 3vh;
text-transform: uppercase;
letter-spacing: 0.1em;
}

5) Стиль ссылки, если она используется в тексте:

.p-summary a {
color: #fff;

}

6) CSS нужно встроить в HTML напрямую

Часть II. Динамический сценарий шейдера:

7) Редактируемый файл можно взять здесь: https://sites.google.com/site/konoplevmedia/shaderscriptedit.js

Пояснения к файлу:
строка 50 - развертывание объекта в пространстве
строка 109 - расстояние до экрана
строка 110 - объем объекта
строка 113 - расположение вашего исходного файла (картинки)
строка 148 - ракурс объекта

Обратите внимание, что исходник надо загружать в репозиторий, например, сюда: https://github.com/

Как работать с репозиторием GitHub:
1) Создать аккаунт
2) В горизонтальном сайдбаре справа вверху выбираете "+", затем "create a new repository"
3) Адрес репозитория (произвольный) указываете латиницей
4) Жмете зеленую кнопку "create repository"
5) Создаете файл README с произвольным текстом и нажимаете "commit new file"
6) Выбираете в сайдбаре бранча опцию "upload files" и загружаете ваш файл png
7) Нажимаете "commit changes"
8) Открываете файл кликнув на его имя
9) Открываете файл кликнув на "открыть изображение в новой вкладке"
10) Копируете URL вида: https://raw.githubusercontent.com/Dmitrykonn/specimen/master/burningsun.png
11) Внедряете ссылку в JS, сам JS загружаете в Google sites и встраиваете на страницу.

Часть III. Собственно HTML.
8) Указываете стандартные метатеги и заголовок:

<!DOCTYPE html>
<html lang="en" >

<head>
<meta charset="UTF-8">

<title>WebGL</title>

9) Закрываете тег <head> и внутри тега <body> объявляете класс описания страницы:

<div class="p-summary">
<div class="p-summary__wrap">

10) Далее в теге заголовка первого уровня указываете заголовок, после чего в теге абзаца - основной текст.

11) Закрываете оба класса
12) Разворачиваете шейдер в теге <canvas>:

<canvas class="p-canvas-webgl" id="canvas-webgl"></canvas>

13) Встраиваете минимальные значения библиотеки AJAX:

<script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/86/three.min.js'></script>

14) Встраиваете ваш JS с внедренным скриптом шейдера.
15) Закрываете теги <body> и <html>.

Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/2019/03/shader.html

Ссылки на выполненное задание принимаются в комментариях к этому посту до 18:00 22 февраля.