Как сделать наложение текстур на прозрачную картинку (png) или на dom — элемент?

Question

[dkrylov]

Здравствуйте, уважаемые программисты....и дизайнеры...и верстальщики :D

Наткнулся на не тривиальную задачу. Есть каркас двери (структура может и дизайн двери может изменяться). Есть текстура для такой двери. Каким образом накладывать текстуру?!?

На скриншоте показано примерно как должно выглядеть до и после наложения текстуры.


Работать с DOM деревом? Или Canvas? Если можно ответьте не просто да или нет, а более развернутее.

Comments

[Андрей Токмаков]

А текстуры в каком формате? Так же в png с прозрачным фоном?

[dkrylov]

Да, либо jpg.

Answer 1

[Николай Чуприк]

Мой вариант. Надо делать в SVG. Заготовить 4 файла:

1-2. Две текстуры размером на всё поле картинки: с горизонтальным направлением древесины и с вертикальным.

3-4. Из чертежа двери сделать две маски: одну для участков с горизонтальным направлением текстуры, другую — с вертикальным.

Ну и всё это совместить. Только имейте ввиду, что вы показали справа картинку отрендеренную, там присутствуют тени. Т.е. дело не только в наложении текстур, но и в освещении, и в рендере. Поэтому не ждите, что за счёт текстур вы получите такую вот картинку, как показали.

Для улучшения могу посоветовать поверх всего этого наложить сам чертёж, чтобы были дополнительно прорисованы рёбра, т.к. иначе они не будут видны (это будет просто граница двух текстур, никак больше не выделенная).

Comments

[dkrylov]

Спасибо за столь развернутый ответ. Хороший ход мыслей.

Answer 2

[IsaevDev]

а вам не кажется что в примере просто отдельно прозрачная картинка с чертежом и отдельно картинка с текстурированной дверью? больше похоже на рендер, честно говоря, чем на обычную текстуру

Comments

[dkrylov]

Я привел как пример, не судите строго.

Для Вас опишу чуть понятнее, структура двери допустим как на этом чертеже, а текстуры есть для каждого элемента структуры (балки по бокам, верх двери)

[IsaevDev]

да я и не сужу
Николай вот тоже заметил, что прямо как на картинке через текстуры не выйдет
если нужно динамически менять текстуры я бы сделал единую текстуру картинкой просто без разбивки по элементам даже, а поверх накладывал бы прозрачный PNG с тенюшками и засветами. я думаю это будет симпатичней, чем масками

[Николай Чуприк]

IsaevDev: Ни скажите. Направление текстур очень важно. Иначе будет говно. Полупрозрачный PNG с тенюшками — конечно правильно. Хотел написать, но забыл.

Я сейчас нечто аналогичное делаю на three.js. С паралаксом камеры при движении мышки по экрану. Но тут с дверями важен баланс "сложность-зашибезность". Если моделей много и они часто меняются, то эксплуатировать сайт не реально.

[IsaevDev]

Николай Чуприк: можно и на канвас попробовать. сделать насколько масок в пнг для разных направлений текстур и накладывать послойно + тенюшки