Drop Down MenusCSS Drop Down MenuPure CSS Dropdown Menu

Современные информационные технологии. 4 курс. Лабораторное занятие №7. Шейдер на 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 перед закрывающим тегом </head>
Часть 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

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

Комментарии

  1. Александра13 марта 2019 г. в 15:01

    https://sidebara.blogspot.com/2019/03/blog-post.html

    ОтветитьУдалить
  2. Ольга Ковач13 марта 2019 г. в 17:16

    https://shadersh.blogspot.com/2019/03/shader.html

    ОтветитьУдалить
  3. Михаил Бычков14 марта 2019 г. в 21:42

    https://michail-1997.blogspot.com
    Бычков Михаил, ФЖ-402

    ОтветитьУдалить
  4. Ксения Строкач21 марта 2019 г. в 01:01

    Ксения Можаева, ФЖ-402

    https://mozhaeva-web-dizain.blogspot.com/2019/02/4-2-1.html - Лабораторная работа №1

    https://mozhaeva-web-dizain.blogspot.com/2019/02/4-2-2.html - Лабораторная работа №2

    https://mozhaeva-sit.blogspot.com/2019/03/1-2-4-5-1-2-3-page-title-button.html - Лабораторная работа №3

    https://mozhaeva-sit.blogspot.com/2019/03/4-2-4.html#2 - Лабораторная работа №4

    https://mozhaeva-sit.blogspot.com/2019/03/4-2-5.html - Лабораторная работа №5

    https://mozhaeva-sit.blogspot.com/2019/03/4-2-6.html - Лабораторная работа №6

    https://zadanie7.blogspot.com/2019/03/blog-post.html - Лабораторная работа №7

    ОтветитьУдалить
    Ответы
    1. dmitrykonn25 марта 2019 г. в 13:18

      Все задания - "отлично", кроме №2 - оценка "хорошо"

      Удалить
  5. Никита Васильев24 марта 2019 г. в 12:25

    Задание 1:
    https://vasilevjour.blogspot.com/2019/01/charset-utf-8-sass-mixin-for-animation.html

    Задание 2-3 (вкладка Балкон):
    https://sssupersus.blogspot.com/2019/03/1-2-3-4-5.html

    Задание 4:
    https://sssupersus.blogspot.com/2019/03/sidebar-1-2-3-4-5.html

    Задание 5:
    https://sssupersus.blogspot.com/2019/03/blog-post.html

    Задание 6:
    https://sssupersus.blogspot.com/2019/03/tarantino-1969-bounty-law.html

    Задание 7:
    https://sssupersus.blogspot.com/2019/03/kapli-kapli.html

    ОтветитьУдалить
  6. Unknown25 марта 2019 г. в 11:04

    https://zvezdasmerty.blogspot.com/2019/03/webgl-import-urlhttpsfonts.html

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

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

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