00:00:00Acho que a internet precisa desesperadamente de um pouco mais de capricho, especialmente agora que a IA
00:00:03é boa em criar sites de uma só vez.
00:00:05Então, e se fosse mais fácil tornar a web mais divertida? Como isto. Não se preocupe, não estou
00:00:09te segurando nem nada, só me divertindo um pouco neste site. Você pode ver agora
00:00:13que há muitos olhos meus na parte de baixo. E, aliás, se eu consigo clicar no botão
00:00:17de inscrever-se, você também consegue.
00:00:18Em vez disso, talvez você queira uma interação mais funcional, porém bonita, para o seu site, ou
00:00:22você quer inventar novos "dark patterns", como fazer o usuário jogar pinball para cancelar a inscrição. Ou apenas
00:00:27talvez, depois de um longo dia de trabalho, você queira sentar no computador com uma cerveja, sentar
00:00:30no seu computador virtual com uma cerveja e navegar no Twitter ou algo assim. Tudo isso é
00:00:34possível graças a algo chamado HTML in Canvas. Vamos falar sobre isso.
00:00:43Eu só descobri isso recentemente, graças ao Matt Rothenberg no Twitter. E depois que eu
00:00:46vi esse post, pareceu dar início a uma semana no Twitter onde surgiam várias demonstrações legais
00:00:50o tempo todo. Vi que o Wes Boss estava testando isso e se divertindo muito.
00:00:54Então também vi uma do AA, que era de dedos em forma de arma. E ambas as nossas demonstrações
00:00:58na verdade inspiraram aquela do YouTube que mostrei na introdução. Então, vou colocar todos os links
00:01:02para as fontes das demonstrações mostradas na descrição abaixo, se quiser ver mais.
00:01:05Por enquanto, o que é HTML in Canvas? Bem, em resumo, ele simplesmente permite que você insira elementos
00:01:10DOM reais e interativos diretamente nos seus canvas WebGL ou 2D. E, no momento, é apenas uma proposta.
00:01:15Na verdade, foi adicionado ao Chrome Canary como um experimento, e é por isso que todas essas demonstrações
00:01:19surgiram recentemente, e você pode testar no Chrome Canary agora ativando esta flag.
00:01:24Sua próxima pergunta, porém, pode ser: por quê? Bem, é porque o Canvas pode permitir algumas interfaces
00:01:28e personalizações incríveis como as que já vimos. Coisas que são mais difíceis, se não impossíveis,
00:01:32de fazer com CSS. Mas o que o Canvas não consegue fazer é renderizar facilmente layouts complexos de texto e conteúdo HTML.
00:01:38Você geralmente precisa reconstruí-los do zero internamente. E isso significa que o conteúdo
00:01:42baseado em Canvas pode sofrer com questões como acessibilidade, internacionalização, desempenho e qualidade.
00:01:47E essas são coisas que o HTML resolveu em grande parte. Portanto, o HTML in Canvas é o melhor dos dois
00:01:51mundos.
00:01:52Para mostrar como isso funciona, deixe-me levá-lo através de uma demonstração de como usá-lo. E o que
00:01:56eu tenho aqui é um site de horários do metrô de Londres que fiz anos atrás, antes de a IA
00:02:00provavelmente conseguir criar isso de uma vez só. E sempre pensei que seria legal se pudéssemos ter essas informações
00:02:02dentro de uma cena em Three.js. Agora, sim, tecnicamente você pode fazer isso com Three.js, obviamente o Three.js suporta
00:02:08texto, mas será muito mais fácil se eu puder apenas usar HTML in Canvas e pegar o elemento
00:02:12que usa a tabela de horários e colocá-lo diretamente dentro da minha cena. Então, em vez desta imagem
00:02:16do Thomas the Tank Engine aqui, eu só quero ver meu HTML. Para fazer isso, o primeiro passo
00:02:20vai ser pegar o HTML que queremos renderizar na cena e colocá-lo
00:02:24dentro do canvas. Então, este é o HTML que realmente construiu aquele quadro que acabamos de ver.
00:02:28E nós o colocamos como um elemento filho do próprio canvas. Agora, neste momento, este
00:02:32elemento está servindo como fallback do canvas. Então, se o canvas não carregar no navegador do usuário
00:02:36por qualquer motivo, eles verão esse elemento. E não é isso que queremos.
00:02:39Para corrigir isso, o que podemos fazer com o HTML in Canvas é fornecer ao nosso elemento canvas
00:02:44um atributo chamado "layout subtree". Isso diz ao navegador para tratar quaisquer filhos do canvas
00:02:48como participantes reais do layout. Então eles são colocados na árvore de acessibilidade, eles podem receber
00:02:52foco, mas ainda não são pintados na tela. Podemos ver isso na minha demonstração aqui,
00:02:56onde ainda não há nada aparecendo. O elemento não vai aparecer em lugar nenhum aqui,
00:03:00mas temos ele no inspecionar elemento e, ao passar o mouse sobre ele, mostra que está tecnicamente
00:03:04renderizando. Só está invisível. Então, para realmente renderizar no canvas, precisamos convertê-lo
00:03:08em uma textura, que podemos usar no lugar da imagem do Thomas the Tank Engine. E
00:03:12é exatamente o que estou fazendo com esta função aqui. Agora, a maior parte disso é na verdade Three.js,
00:03:15então você não precisa se preocupar com isso. A primeira é simplesmente obter a textura,
00:03:19que é uma textura GL, e que é a imagem do Thomas the Tank Engine no momento. Mas então o que
00:03:22estamos fazendo nesta linha é usar uma função de HTML in Canvas chamada "text element image 2d".
00:03:27Agora, parece bem complexo, mas tudo o que estamos fazendo é pegar a textura do Three.js
00:03:30à qual queremos aplicar o elemento. Estamos fornecendo algumas informações sobre como ele é renderizado, como
00:03:34o espaço de cor e outras coisas para a GPU, mas não precisamos nos preocupar muito com isso.
00:03:38E então também estamos fornecendo o elemento HTML que queremos renderizar. Neste caso,
00:03:42é o quadro. E isso simplesmente vem desta linha aqui, onde estamos usando "document.getElementById"
00:03:45para obter o elemento que colocamos dentro do canvas. Com isso de volta
00:03:49à nossa demonstração, você pode ver que agora temos a tabela de horários no lugar daquela imagem e ela está
00:03:53atualizando em tempo real. O relógio está atualizando e vi os horários atualizarem também. Então, isso agora
00:03:57está usando nosso elemento HTML, mas está sendo fornecido como uma textura neste canvas. Agora, vamos
00:04:02inspecionar o elemento. Você pode realmente ver, ao passar o mouse sobre o elemento, que esse quadro
00:04:06ainda está sendo renderizado de forma invisível. E isso porque você pode pensar nisso
00:04:09essencialmente como olhar para o que esse elemento seria, tirar um print disso e então
00:04:14colocá-lo no lugar da textura. Então, ele será atualizado cada vez que qualquer um desses elementos for renderizado novamente.
00:04:19Isso é feito com um evento de pintura no HTML Canvas que dispara as atualizações quando
00:04:22detecta que qualquer um dos elementos filhos do canvas foi renderizado novamente, mas você também pode
00:04:26solicitar uma repintura se quiser, de forma semelhante ao que você pode fazer com "requestAnimationFrame".
00:04:30Agora, se você ainda está um pouco confuso, recomendo muito verificar essa proposta no GitHub.
00:04:34Ela tem muitas informações e demonstrações. E para ser sincero, eu escolhi um caminho um pouco
00:04:38mais complexo, escolhendo Three.js e WebGL. Mas se você quiser ver o exemplo
00:04:42mais básico, tudo o que precisa fazer é, dentro de um canvas, colocar algo como um elemento de formulário
00:04:46aqui. E se quiser renderizar isso no canvas, podemos simplesmente dizer "context.drawElementImage",
00:04:49fornecer um elemento de formulário e também onde queremos colocá-lo. Então essa
00:04:54é a forma mais simples de HTML in Canvas. Também quero mostrar muito rapidamente
00:04:58esta demonstração. Acho que é muito divertida. Você pode ver que usa WebGPU e a função "copyElementImage"
00:05:02do HTML in Canvas para desenhar uma div sob um controle deslizante de gelatina. E é muito divertido.
00:05:07Mas o que é realmente legal nisso é que ele ainda está usando um input nos bastidores.
00:05:11É apenas um input personalizado muito legal. Esse é o tipo de coisa que o HTML in Canvas pode permitir.
00:05:16Existem algumas desvantagens, porém, que a proposta está tentando resolver. Uma das principais,
00:05:19obviamente, sendo o desempenho. Está um pouco instável no momento. Também há alguns
00:05:24bugs como o "drawElementImage" estar um frame atrasado em relação ao estado do DOM. Isso é um pouco
00:05:28de dessincronização visual. E, aparentemente, se você tentar colocar uma barra de rolagem dentro dos filhos
00:05:32do canvas, ele simplesmente trava. Mas é por isso que é um experimento por enquanto.
00:05:36É exatamente isso que eles estão procurando. Também houve algumas preocupações com privacidade de que, se
00:05:40isso puder renderizar um elemento HTML, você não quer que ele vaze mais informações do que você
00:05:44geralmente seria capaz de obter via JavaScript. Então eles têm uma pintura que preserva a privacidade,
00:05:48excluindo informações confidenciais como cores do sistema, temas, preferências, marcadores de ortografia e
00:05:52gramática, informações de links visitados e assim por diante. E eu acho que a principal preocupação aqui é que
00:05:56eles não querem adicionar outro ponto de coleta de dados para "fingerprinting". De qualquer forma,
00:06:00gostei do que vi até agora. Então, adoraria se isso pudesse deixar de ser apenas um experimento,
00:06:04mas estou super curioso para saber o que você acha. Deixe-me saber nos comentários abaixo, inscreva-se
00:06:07e, como sempre, vejo você no próximo vídeo.