Современные технологии производства СМИ. 4 курс. Практическое занятие №3. Шейдер на WebGL
Для создания шейдера с динамическим фоном вам потребуется:
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://raw.githubusercontent.com/Dmitrykonn/locals/main/shaderscript.js
Пояснения к файлу:
строка 50 - развертывание объекта в пространстве
строка 109 - расстояние до экрана
строка 110 - объем объекта
строка 113 - расположение вашего исходного файла (картинки) - загрузите фото в репозиторий и замените ссылку.
строка 148 - ракурс объекта
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://raw.githubusercontent.com/Dmitrykonn/locals/main/shaderscript.js
Пояснения к файлу:
строка 50 - развертывание объекта в пространстве
строка 109 - расстояние до экрана
строка 110 - объем объекта
строка 113 - расположение вашего исходного файла (картинки) - загрузите фото в репозиторий и замените ссылку.
строка 148 - ракурс объекта
Управлять отображением шейдера можно через изменение параметров в указанных строках.
Часть 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>
Если библиотека работает только через VPN, то встройте ее напрямую.
Часть 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>
Если библиотека работает только через VPN, то встройте ее напрямую.
14) Встраиваете ваш JS с внедренным скриптом шейдера.
15) Закрываете теги <body> и <html>.
15) Закрываете теги <body> и <html>.
Если все верно, то ваша страница будет выглядеть примерно так: https://konoplevdesign3.blogspot.com/2019/03/shader.html
Ссылки на выполненное задание принимаются в комментариях к этому посту до 17:00 24 октября.
https://smotrikisa.blogspot.com/2025/10/webgl-hotd-house-of-dragon-is-american.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://yanniiish.blogspot.com/2025/10/5.html
ОтветитьУдалитьОценка "отлично"
УдалитьАнастасия Федякина
ОтветитьУдалитьИзвините:( Два предыдущих задания:
Веб-дизайн. 4 курс. Практическое занятие №2. Google Material дизайн - https://nastuxa333333333333333333.blogspot.com/2025/10/box-sizing-border-box-padding-0-margin.html
Современные технологии производства СМИ. 4 курс. Практическое занятие №2. Динамическая 3D-панорама - https://nastuxa333333333333333333.blogspot.com/2025/10/4-2-3d-2.html
Принято. Первое задание - "хорошо", второе - "отлично".
Удалитьhttps://babzuniss.blogspot.com/2025/10/3-webgl.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://eufzh-401.blogspot.com/2025/10/3-webgl.html
ОтветитьУдалитьОценка "отлично"
Удалитьhttps://polinagorbunova401.blogspot.com/2025/10/webgl-import-urlhttpsfonts.html
ОтветитьУдалитьОценка "отлично"
УдалитьДолг Веб-дизайн. 4 курс. Практическое занятие №2. Google Material дизайн
ОтветитьУдалитьhttps://polinagorbunova401.blogspot.com/2025/10/4-2-google-material.html
Принято, оценка "хорошо"
Удалить