Как это работает. Под капотом у крутяшек (часть 2, html5)
Продолжаем.
У нас есть 100 картинок из блендера пронумерованных от 0000 до 0099, всего 100 штук.
Результат getturnable.tumblr.com/goodly
СпойлерШаг первый, ищем хостинг с прямыми ссылками.
Отвечу кратко, бесплатных хостингов с прямыми ссылками на данный момент не существует. Единственная нормальная замена это гугл сайты, про которые уже никто не помнит.
Регистрируемся и создаем файловую структуру, вида: название сайта>название модели>папка с фреймами
Процесс создания сайта опущу, потому, что интерфейс там простейший.
Хостинг мы нашли, теперь все наши ссылки будут иметь вид sites.google.com/название сайта/название папки с моделью/папка с фреймами/0000-0099.png
Шаг второй, ищем доверенный сайт для deviantart, в качестве адекватной площадки для html5 подойдет tumblr, да, он живет и здравствует по сей день и имеет возможность создания кастомного интерфейса с правкой кода страницы.
Шаг третий, пишем код-для этого идем в настройки внешнего вида тамблера
Прокатываем левый столбик с кастомизацией до низа и жмем добавить страницу, в открывшемся окне выбираем custom layout и спускаемся в редактор html кода
Код страницы очень прост и состоит из нескольких шагов.
1)Загрузка картинок.
2)Привязка событий мыши/планшета
3)Простые плюшки в виде перехода в фуллскрин
Для начала пропишем стили
#showTurnable { display: block; } .waiting { background-color: black; } .loaded { transition: background-color 0.5s ease; background-color: #D0D0D0; } .show { -moz-transition: opacity 0.7s linear; -o-transition: opacity 0.7s linear; -webkit-transition: opacity 0.7s linear; transition: opacity 0.7s linear; } .hide { -moz-transition: opacity 0.7s linear; -o-transition: opacity 0.7s linear; -webkit-transition: opacity 0.7s linear; transition: opacity 0.7s linear; opacity: 0; } html,body{ overflow-y:hidden; overflow-x:hidden; } img:-webkit-full-screen { width: 100% !important; } img:-moz-full-screen { width: 100% !important; } img:-ms-fullscreen { width: 100% !important; } img:fullscreen { width: 100% !important; } button { position: absolute; left:90%; top:0%; height:100%; padding:4%; opacity:0; user-select: none; -moz-user-select: none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; } ::selection { background: transparent; } ::-moz-selection { background: transparent; } tumblr_controls, .tmblr-iframe{display:none !important;} #loader { position:absolute; top:0%; left:0%; right:0%; bottom:0%; margin:auto; width: 40%; } img{pointer-events: none;}
showTurnable -канвас,waiting и loaded а также show и hide отвечают за появление прелодаера, и плавное изменение цвета страницы при всех загруженных изображениях.
Далее настраиваем местоположение картинки загрузки, канваса, снимаем событие захвата картинки чтобы она не тянулась за курсором и приделываем кнопку для перехода в фулскрин на экране планшета, она скрыта и располагается вдоль всего правого края экрана.
Тело страницы имеет класс loading при загрузке, по окончанию ее имя класса меняется и страница меняет цвет, точно также реализовано и появление канваса и исчезание картинки загрузки, к каждому из них присвоены свои классы, меняющиеся при загрузке.
Сама процедура загрузки идет циклом, создает объекты картинок, и присваивает им url расположения
var imgObj = new Array(); // массив объектов изображений for(i = 0; i < 100; i++){ imgObj[i]= document.createElement('img') // imgObj[i] = new Image() // создаем объект изображения if(i<10) { imgObj[(i)].src = "https://sites.google.com/site/home/images/модель/src/000"+i.toString()+".jpg"; } else { imgObj[(i)].src = "https://sites.google.com/site/home/images/модель/src/00"+i.toString()+".jpg"; } }
На событие загрузки 99ой картинки вешается функция как раз смены классов, и отрисовки канваса с уже заданным размером. Это плохо, надо цепляться к событию загрузки каждого фрейма и в теле функции увеличивать значение на единицу, и если в финальной функции значение счетчика действительно 100 то запускать процедуры отображения канваса, но за все время существования гугл сайты еще ни разу не падали и не вываливали ошибки при доступе к картинкам.
Функция ресайза картинок для подгона по размеру окна
function calculateAspectRatioFit(srcWidth, srcHeight, maxWidth, maxHeight) { var ratio =Math.min(maxWidth / srcWidth, maxHeight / srcHeight); return { width: srcWidth*ratio, height: srcHeight*ratio }; } scaledW=calculateAspectRatioFit(imgObj[0].width,imgObj[0].height,window.innerWidth,window.innerHeight).width; scaledH=calculateAspectRatioFit(imgObj[0].width,imgObj[0].height,window.innerWidth,window.innerHeight).height; showturn.width=Math.round(scaledW); showturn.height=Math.round(scaledH); showturn.src=imgObj[counter].src;
Это в случае с реализацией с канвасом, если использовать просто див и в нем картинку, то можно циклом в момент изменения размера окна/ориентации экрана, присваивать всем картинкам размер через стили.
Простой код для изменения видимости канваса
function showcanvas() { canvas.classList.remove("hide"); document.body.classList.remove("waiting"); document.body.classList.add("loaded"); } function hideimg() { document.getElementById("loader").classList.remove("show"); document.getElementById("loader").classList.add("hide"); }
Создаем две функции которые будут использоваться для отслеживания перемещения пальца/курсора
var ctx = canvas.getContext("2d"); document.addEventListener('mousemove', handler, false); // document.addEventListener('touchmove', handler2, false); window.addEventListener("touchmove", handler2, {passive: false} ); function handler(e) { if((e.buttons==1)){ e.preventDefault(); if (e.pageX < oldx) { direction = "left"; counter--; } else if (e.pageX > oldx) { direction = "right"; counter++; } oldx = e.pageX; mousePos.x = e.x; if(counter==100) { counter=0; } if(counter==-1) { counter=99; } ctx.drawImage(imgObj[counter], 0, 0,scaledW,scaledH); } } function handler2(e) { e.preventDefault(); if (e.changedTouches[0].pageX < oldx) { direction = "left"; counter--; } else if (e.changedTouches[0].pageX > oldx) { direction = "right"; counter++; } oldx = e.changedTouches[0].pageX; mousePos.x = e.changedTouches[0].pageX; if(counter==100) { counter=0; } if(counter==-1) { counter=99; } ctx.drawImage(imgObj[counter], 0, 0,scaledW,scaledH); }
Вешаем плюшки в виде фулскрина по дабл клику
//фулскрин по дабл клику var isfullScreen=false; document.ondblclick = function(e){ e.preventDefault(); if (isfullScreen==false) { openFullscreen(); isfullScreen=true; } else { closeFullscreen(); isfullScreen=false; } }; document.getElementById('full').onclick = function(e){ e.preventDefault(); if (isfullScreen==false) { openFullscreen(); isfullScreen=true; } else { closeFullscreen(); isfullScreen=false; } }; var elem = canvas; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFullscreen(); } else if (elem.mozRequestFullScreen) { /* Firefox */ elem.mozRequestFullScreen(); } else if (elem.webkitRequestFullscreen) { /* Chrome, Safari & Opera */ elem.webkitRequestFullscreen(); } else if (elem.msRequestFullscreen) { /* IE/Edge */ elem.msRequestFullscreen(); } } function closeFullscreen() { if (document.exitFullscreen) { document.exitFullscreen(); } else if (document.mozCancelFullScreen) { document.mozCancelFullScreen(); } else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); } else if (document.msExitFullscreen) { document.msExitFullscreen(); } }
Да, код отвратителен, но приводится просто как пример, для общего описания процесса. Необходимо еще добавить
<meta name="viewport" content="width=device-width, initial-scale=1">
для исключения масштабироания на мобильных девайсах при двойном тычке
46 комментариев
Нужна (естественная) популяризация крутяшек. Быть может, тогда в IT появятся нормальные форматы и программы для просмотра (если будет ещё разделение каналов для 3D, то будет ещё лучше)
можно воспользоваться двумя методами
1) Number.toFixed(decimals)- преобразует число в строку, оставив decimals знаков после запятой
2) String.padStart(length, filler) — дотянет длину строки до length, добавляя к началу filler
то есть, можно переписать код так:
вызывать два раза одну и ту же функцию, чтобы получить разные поля возвращаемого объекта — не комильфо
во-первых, можно присвоить результат переменной и она станет объектом с нужными полями
чуть более модерновый вариант — использовать деконструирующее присваивание, например так
Эти округления не нужны
А ещё можно отображать картинку, задавая её фоном для дива
что нужно прописать в стилях
ну и, собственно, вписывать урл как-то так
На тумбе не проверял, в старых браузерах не проверял, зато обработка скорости нормальная и число картинок не обязательно ровно сто
Это охуенно
Если это действительно вопрос и он про скорость, то оно сводится к вычислению угла поворота, который задаётся мышкой, а уже из угла поворота вычисляется номер картинки, как-то так:
Спойлер
Но просто поправить несколько строчек в коде неинтересно, я люблю переписывать всё подряд)
А остальное наверно и так можно в исходниках прочитать
Проблема с торможением канваса не решалась я хз сколько, спасибо тебе
Что снизу срезать?
И там всё равно нужно ещё и передавать много данных. Я умножил размер одной из картинок на 100x100 — получилось 990210000 байт. Даже если сократить 100 до 35, будет многовато. Можно помещать сразу по многу картинок в один JPG/PNG, но не факт, что и это сильно поможет.
Баг починил, devicePixelRatio учёл, тестовая страница andreymal.org/files/turnable_test/chess.html
Тестовая пикча должна не мылиться и абсолютно точно попадать в пиксели экрана в любых ситуациях
Да, но во время скроллинга она «шумит»
Без ImageBitmap
С ImageBitmap (без аппаратного ускорения)
С ImageBitmap и глюковатым аппаратным ускорением
ПК:привязка fps к частоте монитора)Опера 58.0.3135.68
Огнелис съел еще больше
Огнелис 65.0.1
Как-то слишком много. Попробуем обновить :D
Огнелис 66.0
Другое дело! Теперь что Хром, что Лис, кушают ± одинаково
Что касается портативных устройств:
Adreno 530:Битмап не влиял на фпс, я так понял, ограничение 60фпс.
Опера, Хром, Эдж — 55-60фпс
Огнелис — 15-25фпс. 65.0.1 :D Самая новая в Google play
Ушел на 4pda, скачивать 66 версию.
Огнелис 66 — Увы, 22-28фпс.
Mali-400 MP4:Хром 54-60фпс. Периодически замирает.
Открыл chess.html, такие же фризы, как у тебя на видео. Получил более плавную картинку, заморозив Service GP и сам GP, отжирают много озу, и так всего 2гб
Спойлер
Гугл говорит, что такое в любом хроме на любых устройствах с Mali-400, и лечится это только отключением аппаратного ускорения канвасов в настройках хрома (ну или оперы в моём случае), такие дела