Max Home IndustryЭто безумный проект, но вы должны им восхищаться. Визуализируйте классический 3D-чайник, используя только DHTML, то есть JavaScript и HTML, но без canvas, без CSS 3, без SVG? Это звучит невероятно, но это не так.
Брайан Бекман и Эрик Мейер-известные личности и часто появляются в интересных видеороликах Microsoft Channel 9, но их последний эксплойт написан как пост на веб-сайте ACM.
Идея состоит в том, чтобы создать приложение для 3D-рендеринга, не используя ничего, кроме HTML и JavaScript. Если вы знакомы с технологией, то вы можете подумать, что это невозможно, но если вы знаете технологию немного лучше, вы понимаете, что все виды вещей возможны, хотя и редко делаются.
Ключ в том, что вы можете взять div и с помощью JavaScript назначить ему цвет, размер и положение. Это означает, что у вас есть небольшой прямоугольный графический компонент, который вы можете использовать для создания других фигур. Другими словами, DHTML (динамический HTML) уже имеет примитивную векторную графику. Вы даже можете работать с растровой графикой, если уменьшите div до размера одного пикселя, но это может просто перегрузить механизм компоновки обычного браузера.
Вы даже можете использовать несколько дивов для визуализации 3D-сцены. Проблема в том, что современные графические конвейеры, как правило, работают в треугольниках, а div-это прямоугольник. Решение состоит в том, чтобы использовать причуду div, которая позволяет отображать треугольную область цвета. По сути трюк основан на использовании стиля границы для создания границы настолько большой, что в середине div ничего не остается:
Затем вы уменьшите два треугольника, установив для них границы нулевой ширины, и, наконец, установите одну из оставшихся двух границ прозрачной. В результате div отображается в виде одного треугольника.
Проблема в том, что это прямоугольный треугольник с горизонтальными и вертикальными краями. Конвейеру 3D-рендеринга обычно нужны общие треугольники, т. Е. Треугольник между любыми тремя точками с любыми углами. Решение этой проблемы состоит в том, чтобы просто разбить каждый из общих треугольников на комбинации прямоугольных треугольников. Это звучит просто, но это довольно сложно — смотрите оригинальную статью для получения полной информации.
Трюк с треугольником, вероятно, был изобретен Джеффом Лау: http://www.uselesspickles.com/triangles/, но использовать его для создания полного классического чайника-это произведение великолепного безумия. Как говорят авторы:
«Конечными компонентами графического конвейера являются отбраковка задней поверхности, Z-упорядочение, ориентация по кватернионам и библиотека кинематики для вращения объекта. Добавьте немного физики пружины и тире, и вы сможете заставить свой чайник подпрыгивать, трансформироваться, разбиваться и не разбиваться.»
Вы можете увидеть несколько примеров рендеринга чайника с прямоугольными треугольниками на https://github.com/gousiosg/teapots но, к сожалению, не эта конкретная реализация JavaScript.
Все это поднимает вопрос о том, действительно ли нам нужен HTML5, не говоря уже о canvas или WebGL?