Сфера в трехмерной графике обычно состоит из сотни-другой треугольников, при этом половина из них не видна человеку, поскольку их отсекает face culling и/или zbuffer.
Сфера всегда кажется наблюдателю кругом. Поэтому можно схитрить и вместо сферы нарисовать плоскость, которая всегда повернута к наблюдателю одной стороной. А уже на этой плоскости с помощью математики и какой-то матери изобразить текстуру, освещение и блик.
Нам нужно вычислить три главных параметра: позиция плоскости, её размер и трехмерные координаты сферы, спроецированной на эту плоскость. Получив эти параметры можно приступить к обману нашего наблюдателя.
С позицией плоскости все относительно просто: если вы рисуете ближнюю часть сферы, то это сдвиг на радиус от центра воображаемой сферы к камере.
Изначально тут должна была быть статья про кубик льда с отражением окружающего мира (Environment Mapping) и бликами (Specular). Но в процессе подготовки материала неожиданно пришло понимание непонимания бликов и моделей освещения.
Конечно, прямо сейчас на сайте есть рабочий пример с бликами и освещением и, казалось бы, эту тему можно закрыть. Но на самом деле тот пример сделан на коленке и состоит из костылей, поскольку освещение происходит в двумерном пространстве. Всю красоту можно спокойно переписать на чистом JavaScript без использования WebGL вообще, поскольку работы для него там нет.
Для затравки покажу результат, а потом объясню, как это все работает (можно отключать разные слои освещения и менять скорость вращения):
Если вы хотите добавить кнопки социальных сетей на сайт — выбор огромен! Это может быть кнопка «Поделиться» от компании Яндекс, блок кнопок ShareThis — тысячи их.
Во всех этих решениях есть один фатальный недостаток — они зависят от сторонних сайтов. Если сайт, который предоставляет кнопку, ляжет, то вместе с ним накроется и ваш блог (как минимум — будут тормоза при открытии страниц).
Таким образом, для автономного блога остается два варианта: написать код загрузки кнопок самому или воспользоваться готовым рабочим решением, который делает всю работу за вас и при этом не зависит от сторонних сайтов. Именно такой функционал предоставляет скрипт Social Likes.
Затем скачиваем архив со скриптом и нужным вам файлом стилей. В архиве уже есть готовый index.html с примером, так что, если вам все понятно, можете дальше не читать.
Загружаем social-likes.min.js и файл стилей в папочку с темой и добавляем в functions.php вашей темы вот такой код:
function enqueue_social_likes(){$uri= get_stylesheet_directory_uri();// Регистрируем скрипт и указываем, что он зависит от jQuery
wp_register_script('social-likes',$uri.'/social-likes.min.js',array('jquery'));// Регистрируем файл стилей
wp_register_style('social-likes',$uri.'/social-likes_birman.css');// Если это страница с постомif(is_singular()){// Вставляем скрипт в код страницы
wp_enqueue_script("social-likes");// Вставляем файл стилей в код страницы
wp_enqueue_style("social-likes");}}// Добавим вызов нашей функции во время инициализации скриптов
add_action('wp_enqueue_scripts','enqueue_social_likes');
function enqueue_social_likes() {
$uri = get_stylesheet_directory_uri();
// Регистрируем скрипт и указываем, что он зависит от jQuery
wp_register_script('social-likes', $uri . '/social-likes.min.js', array('jquery'));
// Регистрируем файл стилей
wp_register_style('social-likes', $uri . '/social-likes_birman.css');
// Если это страница с постом
if (is_singular()) {
// Вставляем скрипт в код страницы
wp_enqueue_script("social-likes");
// Вставляем файл стилей в код страницы
wp_enqueue_style("social-likes");
}
}
// Добавим вызов нашей функции во время инициализации скриптов
add_action('wp_enqueue_scripts', 'enqueue_social_likes');
Затем в single.php вашей темы добавляем вот такой блок:
<divclass="social-likes"><divclass="facebook"title="Поделиться ссылкой на Фейсбуке">Facebook</div><divclass="twitter" data-via="koryakokot"title="Поделиться ссылкой в Твиттере">Twitter</div><divclass="vkontakte"title="Поделиться ссылкой во Вконтакте">Вконтакте</div><divclass="plusone"title="Поделиться ссылкой в Гугл-плюсе">Google+</div></div>
<div class="social-likes">
<div class="facebook" title="Поделиться ссылкой на Фейсбуке">Facebook</div>
<div class="twitter" data-via="koryakokot" title="Поделиться ссылкой в Твиттере">Twitter</div>
<div class="vkontakte" title="Поделиться ссылкой во Вконтакте">Вконтакте</div>
<div class="plusone" title="Поделиться ссылкой в Гугл-плюсе">Google+</div>
</div>
После всех этих манипуляций вам наверняка захочется узнать — насколько часто посетители сайта кликают по этим кнопкам. К счастью Social Likes поддерживает событие popup_opened.social-likes, которое вызывается каждый раз, когда открывается окно «Поделиться». Добавляем вот такой код в footer.php вашей темы (сразу после вызова wp_footer()):
Современные игры не были бы так хороши без системы частиц.
Пыль от колёс, дым из выхлопной трубы, звёздочки в магических играх, огонь, брызги — вот это все реализовано с помощью системы частиц.
Хорошая система частиц потребляет мало памяти, быстро работает и имеет многочисленные настройки.
В OpenGL обычно создаётся вершинный буфер, который содержит все частицы одного типа и отрисовывается такой буфер за один проход.
В нашей системе у частицы будут такие параметры:
— позиция
— прозрачность
— сила гравитации
— ускорение
— скорость
Идея такова: есть массив частиц, частица может быть включена или выключена. Для включенных частиц идёт обновление позиции, скорости и прозрачности. Каждая такая частица добавляется в вершинный буфер и все частицы рисуются за один проход.