Современные технологии производства СМИ. 4 курс. Практическое занятие №4. Шейдер на 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 - ракурс объекта

Исходник фото надо загружать в репозиторий.


Часть 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 3 ноября.

Комментарии

  1. Kristina Novikova30 октября 2023 г. в 02:07

    https://krisnovajour.blogspot.com/2023/10/webgl-import-urlhttpsfonts.html

    ОтветитьУдалить
  2. Яна Кравченко30 октября 2023 г. в 02:10

    https://yankajourney.blogspot.com/2023/10/webgl-4.html

    ОтветитьУдалить
  3. Светлана Васильева30 октября 2023 г. в 02:14

    https://svetavasilieva.blogspot.com/2023/10/shader.html

    ОтветитьУдалить
  4. Наталья Граманщикова30 октября 2023 г. в 08:27

    https://grnata74.blogspot.com/2023/10/webgl-import-urlhttpsfonts.html

    ОтветитьУдалить
  5. Evgenia31 октября 2023 г. в 09:08

    https://dontstopthemusicslpw.blogspot.com/2023/10/4-4-webgl.html

    ОтветитьУдалить
  6. Anna Burakina2 ноября 2023 г. в 22:30

    https://annajour1.blogspot.com/2023/11/shader.html

    ОтветитьУдалить
  7. Дарья Иванова3 ноября 2023 г. в 00:26

    https://dashulyaivanova88.blogspot.com/2023/11/webgl-shader-biometrics-are-body.html

    ОтветитьУдалить

Добавлять новые комментарии запрещено.

Популярные сообщения