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

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

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

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

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

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