{"id":2676,"date":"2023-09-14T09:43:38","date_gmt":"2023-09-14T12:43:38","guid":{"rendered":"https:\/\/danielamaksoud.com.br\/blog\/?page_id=2676"},"modified":"2023-10-05T13:13:21","modified_gmt":"2023-10-05T16:13:21","slug":"computacao-grafica-e-ia-na-web-moderna-inf-2008","status":"publish","type":"page","link":"https:\/\/danielamaksoud.com.br\/blog\/computacao-grafica-e-ia-na-web-moderna-inf-2008\/","title":{"rendered":"Computa\u00e7\u00e3o Gr\u00e1fica e IA na Web Moderna &#8211; INF 2008"},"content":{"rendered":"<ul class=\"heart-list\">\n<li><a href=\"https:\/\/github.com\/TecGEDi\/threejs-hello-world-danielamaksoud\" target=\"_blank\" rel=\"noopener\">Primeira Tarefa &#8211; Three.js Hello World<\/a><\/li>\n<figure style=\"width: 50%;\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/danielamaksoud.com.br\/blog\/wp-content\/uploads\/2023\/09\/tarefa-1-computacao-grafica-e-ia-na-web-moderna.png?ssl=1\"><\/figure>\n<li><a href=\"https:\/\/github.com\/TecGEDi\/2-teoria-de-cg-danielamaksoud\" target=\"_blank\" rel=\"noopener\">Segunda Tarefa &#8211; Teoria de CG<\/a><\/li>\n<figure style=\"width: 50%;\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/danielamaksoud.com.br\/blog\/wp-content\/uploads\/2023\/09\/tarefa-2-computacao-grafica-e-ia-na-web-moderna.png?ssl=1\"><\/figure>\n<li><a href=\"https:\/\/github.com\/TecGEDi\/3-compressao-danielamaksoud\" target=\"_blank\" rel=\"noopener\">Terceira Tarefa &#8211; Compress\u00e3o<\/a><\/li>\n<figure style=\"width: 50%;\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/danielamaksoud.com.br\/blog\/wp-content\/uploads\/2023\/09\/tarefa-3-computacao-grafica-e-ia-na-web-moderna.png?ssl=1\"><\/figure>\n\n\t    \t<div id=\"threepress-gallery-Single___Armadillo\" class=\"threepress-gallery\">\n\t    \t\t<pre class=\"threepress-gallery-data\">{\"name\":\"Single___Armadillo\",\"ground_dimensions\":\"1,1,1\",\"controls\":\"orbit\",\"light\":\"directional\",\"ambience\":\"2\",\"ambient_color\":\"#ffffff\",\"cam_pos\":\"0,0,-3\",\"initial_zoom\":\"7\",\"allow_zoom\":\"true\",\"light_pos\":\"0,0,-3\",\"zoom_speed\":\"20\",\"rotate_scene\":\"true\",\"rotate_speed\":\"5\",\"bg_color\":\"linear-gradient(45deg,lightblue,white)\",\"bloom_threshold\":\"5\",\"bloom_strength\":\"5\",\"fog_density\":\"5\",\"fog_color\":\"#000000\",\"model_id\":\"2729\",\"model\":{\"ID\":\"2729\",\"post_author\":\"1\",\"post_date\":\"2023-09-26 09:57:44\",\"post_date_gmt\":\"2023-09-26 12:57:44\",\"post_content\":\"\",\"post_title\":\"single-armadillo\",\"post_excerpt\":\"\",\"post_status\":\"inherit\",\"comment_status\":\"open\",\"ping_status\":\"closed\",\"post_password\":\"\",\"post_name\":\"single-armadillo\",\"to_ping\":\"\",\"pinged\":\"\",\"post_modified\":\"2023-09-26 09:57:44\",\"post_modified_gmt\":\"2023-09-26 12:57:44\",\"post_content_filtered\":\"\",\"post_parent\":\"0\",\"guid\":\"https:\\\/\\\/danielamaksoud.com.br\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/09\\\/single-armadillo.glb\",\"menu_order\":\"0\",\"post_type\":\"attachment\",\"post_mime_type\":\"application\\\/octet-stream\",\"comment_count\":\"0\"}}<\/pre>\n\t    \t<\/div>\n<p>Para instalar o <strong>gltfpack<\/strong> no seu projeto, execute:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\nnpm i gltfpack\r\n<\/pre>\n<p>Instale a vers\u00e3o para <em>Windows<\/em> do <a href=\"https:\/\/github.com\/zeux\/meshoptimizer\/releases\" target=\"_blank\" rel=\"noopener\">meshoptimizer<\/a>.<\/p>\n<p>Agora crie tr\u00eas vers\u00f5es do modelo 3D desejado:<\/p>\n<ul>\n<li><strong>Unificado<\/strong>: O modelo 3D sem nenhuma otimiza\u00e7\u00e3o.<\/li>\n<li><strong>Unificado<\/strong> + <strong>Quantizado<\/strong>: O modelo 3D otimizado com quantiza\u00e7\u00e3o.<\/li>\n<li><strong>Unificado<\/strong> + <strong>Quantizado<\/strong> + <strong>Comprimido<\/strong>: O modelo 3D otimizado com quantiza\u00e7\u00e3o e compress\u00e3o.<\/li>\n<\/ul>\n<p>Pegue o seu arquivo GLTF original e siga estas instru\u00e7\u00f5es para criar as tr\u00eas vers\u00f5es:<\/p>\n<h3>Unificado (Original)<\/h3>\n<p>Isso \u00e9 apenas uma c\u00f3pia do modelo <strong>.glb<\/strong> original.<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\ngltfpack -i modelo.glb -o modelo-unificado.glb -noq\r\n<\/pre>\n<h3>Unificado + Quantizado<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\ngltfpack -i modelo.glb -o modelo-quantizado.glb\r\n<\/pre>\n<h3>Unificado + Quantizado + Comprimido<\/h3>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\ngltfpack -i modelo.glb -o modelo-comprimido.glb -cc -tc\r\n<\/pre>\n<p>Aqui est\u00e3o as explica\u00e7\u00f5es para as op\u00e7\u00f5es usadas:<\/p>\n<ul>\n<li><strong>-i modelo.gltf<\/strong>: Especifica o arquivo de entrada (seu modelo 3D original).<\/li>\n<li><strong>-o modelo-xxx.gltf<\/strong>: Especifica o nome do arquivo de sa\u00edda para a vers\u00e3o otimizada.<\/li>\n<li><strong>-noq<\/strong>: Desabilita a quantiza\u00e7\u00e3o e produz arquivos <strong>.gltf<\/strong> e <strong>.glb<\/strong> maiores.<\/li>\n<li><strong>-cc<\/strong>: Produz arquivos <strong>.gltf<\/strong> e <strong>.glb<\/strong> com a maior compress\u00e3o dispon\u00edvel.<\/li>\n<li><strong>-tc<\/strong>: Produz uma super compress\u00e3o nos <em>buffers<\/em> bin\u00e1rios e arquivos de textura.<\/li>\n<\/ul>\n<p>Esses comandos v\u00e3o gerar tr\u00eas vers\u00f5es otimizadas do modelo 3D: <strong>modelo-unificado.gltf<\/strong>, <strong>modelo-quantizado.gltf<\/strong> e <strong>modelo-comprimido.gltf<\/strong>.<\/p>\n<p><strong>Obs.<\/strong>: A otimiza\u00e7\u00e3o do modelo 3D pode resultar em perda de qualidade.<\/p>\n<li>Quinta Tarefa: Instancia\u00e7\u00e3o<\/li>\n<\/ul>\n<h2>Conhecimentos \u00dateis<\/h2>\n<ul class=\"heart-list\">\n<li>Para rodar os projetos, execute o seguinte comando no terminal:<\/li>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">\r\nnpm run dev\r\n<\/pre>\n<li>Os projetos rodam na porta <strong>5173<\/strong>.<\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>Primeira Tarefa &#8211; Three.js Hello World Segunda Tarefa &#8211; Teoria de CG Terceira Tarefa &#8211; Compress\u00e3o Para instalar o gltfpack no seu projeto, execute: npm i gltfpack Instale a vers\u00e3o&#8230;<\/p>\n<div class=\"post-bottom\"><a class=\"button\" href=\"https:\/\/danielamaksoud.com.br\/blog\/computacao-grafica-e-ia-na-web-moderna-inf-2008\/\">Leia Mais<\/a><\/div>\n<div class=\"cf\"><\/div>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"jetpack_post_was_ever_published":false,"footnotes":""},"class_list":["post-2676","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/PaVjRH-Ha","jetpack_likes_enabled":true,"jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/pages\/2676","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/comments?post=2676"}],"version-history":[{"count":40,"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/pages\/2676\/revisions"}],"predecessor-version":[{"id":2735,"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/pages\/2676\/revisions\/2735"}],"wp:attachment":[{"href":"https:\/\/danielamaksoud.com.br\/blog\/wp-json\/wp\/v2\/media?parent=2676"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}