Construindo a Base do Sistema com P5.js e Three.js: Integração com Godot

A ponte JS que o Godot oferece em sua versão Web, é de fato muito interessante. Como vimos no meu primeiro post, ela permite a interoperação com o navegador diretamente da engine.

Isso permitiu então a construção de um mecanismo onde uma pagina html contendo codigo javascript arbitrariamente definida possa ser construida.

O uso de bibliotecas, funções personalizadas, multiplas paginas em paralelo, etc, tudo é possivel. É uma pagina web completa como qualquer outra.

(link direto https://gdjsed.pages.dev/ por algum motivo na pagina embedado ele apresenta erros e não funciona imediatamente/sempre. RESOLVER, pois é necessario que funcione dentro de um iframe)

Acima, temos uma exportação do projeto implementado no post original, numa versão simplificada e didatica.

Temos um Editor de texto, que sincroniza-se com o codigo javascript da pagina.

Nessa pagina, temos o exemplo da casinha, feito em p5.js

Pode-se editar o codigo JavaScript, que automaticamente a instancia é re-instanciada, ou seja, o projeto roda novamente, com as atualizações feitas no codigo.

Esse fluxo é o fluxo iterativo base do projeto do sistema.

Vimos originalmente que isso pode ser utilizado num fundo transparente, utilizado como uma textura no ambiente 3D do godot, sendo convertido para visualização fulldome.

O que se propõe é que um editor, abstraido do ambiente fulldome, ou seja, um editor 2d, seja uma das “telas” do sistema, onde o usuario pode iterar livremente, sem distrações, o codigo de seu snippet js.

Ao finalizar seu codigo, o usuario então poderia utilizar ele no ambiente 3d, posiconando e iterando seus parametros. Obtendo em ultima instancia a projeção fulldome, feita pela camera360.