Современные технологии производства СМИ. 4 курс. Практическое занятие №5. Шейдер на 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/
Часть 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>.
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/
Часть 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
Ссылки на выполненное задание принимаются в комментариях к этому посту до 15:00 22 ноября.
https://vsfightclub-and-rake.blogspot.com/2022/11/5-glsl.html
ОтветитьУдалитьОценка "отлично"
УдалитьПрактическое задание №3 – 3D-панорама: https://kotovavs.blogspot.com/2022/11/3-3d.html
ОтветитьУдалитьПринято, оценка "хорошо"
УдалитьПрактическое задание №2 –Fullscreen видео: https://vsfightclub-and-rake.blogspot.com/2022/11/2.html
ОтветитьУдалитьКнопка "остановить" не работает. Теги в CSS и JS идентичны, починить не смогла.
Ок, принято. Оценка "хорошо"
Удалитьhttps://valhis.blogspot.com/2022/11/webgl-import-urlhttpsfonts.html
ОтветитьУдалитьЭтот комментарий был удален автором.
ОтветитьУдалитьДобрый вечер, выполняю практики, которые пропустила, проверьте, пожалуйста: https://dymmrr.blogspot.com/2022/11/blog-post.html , https://dymmrr.blogspot.com/2022/11/blog-post_40.html
ОтветитьУдалитьЗадание с неоморфом - оценка "отлично", с google material - "хорошо".
Удалитьhttps://dymmrr.blogspot.com/2022/11/blog-post_31.html
ОтветитьУдалитьОценка "хорошо", кнопка не кликабельна.
Удалитьhttps://dymmrr.blogspot.com/2022/11/1.html , https://dymmrr.blogspot.com/2022/11/2.html
ОтветитьУдалитьОценка "хорошо", видео закрыто непрозрачным фоном текста.
Удалитьhttps://dymmrr.blogspot.com/2022/11/blog-post_20.html
ОтветитьУдалитьhttps://dymmrr.blogspot.com/2022/11/blog-post_21.html
ОтветитьУдалитьПринято, оценка "хорошо".
Удалитьhttps://evgenijryzhenkov.blogspot.com/2022/11/webgl-import-urlhttpsfonts.html
ОтветитьУдалитьhttps://dymmrr.blogspot.com/2022/11/blog-post_52.html
ОтветитьУдалить