elhacker.net cabecera Bienvenido(a), Visitante. Por favor Ingresar o Registrarse
¿Perdiste tu email de activación?.

 

 


Tema destacado: Entrar al Canal Oficial Telegram de elhacker.net


+  Foro de elhacker.net
|-+  Programación
| |-+  Desarrollo Web (Moderador: #!drvy)
| | |-+  Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..
0 Usuarios y 1 Visitante están viendo este tema.
Páginas: [1] Ir Abajo Respuesta Imprimir
Autor Tema: Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..  (Leído 2,182 veces)
@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..
« en: 15 Octubre 2019, 02:20 am »

Lo iba a subir al foro directamente, pero como el WAF es un troll con javascript y me saltaba con muchos scripts...
Lo bueno es que al subirlo a un hosting puedo meter los ejemplos en vivo.

Utilizo 2 ejemplos:
Pinto un canvas con WebGL.
Pinto un triángulo sobre el lienzo.

Ya le iré metiendo más cosas tipo hacer un cono 3D a base de triángulos. Tema cámaras, planos, proyecciones, sombras, iluminación, frameworks, libs...
http://stringmanolo.byethost12.com/webgl.html



En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

zellion

Desconectado Desconectado

Mensajes: 78



Ver Perfil
Re: Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..
« Respuesta #1 en: 15 Octubre 2019, 10:04 am »

Buenas String:

Revisando la página se muestra el código de esta forma:

Código:
<b�o�d�y�>�
�<sc�r�i�p�t� �i�d�=�"�v�e�r�t�e�x�S�h�a�d�e�r�"� �t�y�p�e�=�"�x�-�s�h�a�d�e�r�/�x�-�v�e�r�t�e�x�"�>�
�/�*�A�q�u�í� �c�ó�d�i�g�o�*�/�
�</script>

�<s�c�r�i�p�t� �i�d�=�"�f�r�a�g�m�e�n�t�S�h�a�d�e�r�"� �t�y�p�e�=�"�x�-�s�h�a�d�e�r�/�x�-�f�r�a�g�m�e�n�t�"�>�
�/�*�A�q�u�i� �c�ó�d�i�g�o�*�/�
�</script>

Justo alfinal del todo, concretamente después de la siguiente frase:

*********************************************************************************
*Es también común declararlos en sus propias etiquetas script ya que WebGL al igual que OpenGL tienen su propio lenguaje de programación llamado GLSL(Lenguaje de Sombras de la Biblioteca Gráfica) indicado para trabajar con Shaders en la tarjeta gráfica.

Aquí un ejemplo:
*********************************************************************************

Utilizo el Firefox Quantum 69.0.3.

Un saludo.


En línea

#!drvy
Moderador
***
Desconectado Desconectado

Mensajes: 5.850



Ver Perfil WWW
Re: Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..
« Respuesta #2 en: 15 Octubre 2019, 10:40 am »

Y si, tienes un problema de encoding en el ejemplo final. La estructura del HTML la tienes bastante mal, supongo que lo has creado con algun editor WYSWYG o algo por el estilo. Te recomendaria meter los estilos [<style>] y los meta [<meta>] dentro del <head> (estándar de programación). Además siempre es aconsejable meter el meta charset o señalar el tipo de encoding que se usa.

Código
  1. <meta charset='UTF-8'>

Tampoco te aconsejo que centres el texto porque acaba cansando la lectura sobre todo en pantallas anchas. Creo que te vas a beneficiar mucho si adoptas markdown como formato para escribir tutoriales.


Por lo demás, el tutorial guay, aunque te recomendaria que uses ES6 pues ya estamos casi en 2020 y la gente quiere ver cosas con ES6 xD


Saludos
En línea

@XSStringManolo
Hacker/Programador
Colaborador
***
Desconectado Desconectado

Mensajes: 2.397


Turn off the red ligth


Ver Perfil WWW
Re: Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..
« Respuesta #3 en: 15 Octubre 2019, 11:13 am »

Buenas String:

Revisando la página se muestra el código de esta forma:

Código:
<b�o�d�y�>�
�<sc�r�i�p�t� �i�d�=�"�v�e�r�t�e�x�S�h�a�d�e�r�"� �t�y�p�e�=�"�x�-�s�h�a�d�e�r�/�x�-�v�e�r�t�e�x�"�>�
�/�*�A�q�u�í� �c�ó�d�i�g�o�*�/�


�<s�c�r�i�p�t� �i�d�=�"�f�r�a�g�m�e�n�t�S�h�a�d�e�r�"� �t�y�p�e�=�"�x�-�s�h�a�d�e�r�/�x�-�f�r�a�g�m�e�n�t�"�>�
�/�*�A�q�u�i� �c�ó�d�i�g�o�*�/�

Justo alfinal del todo, concretamente después de la siguiente frase:

*********************************************************************************
*Es también común declararlos en sus propias etiquetas script ya que WebGL al igual que OpenGL tienen su propio lenguaje de programación llamado GLSL(Lenguaje de Sombras de la Biblioteca Gráfica) indicado para trabajar con Shaders en la tarjeta gráfica.

Aquí un ejemplo:
*********************************************************************************

Utilizo el Firefox Quantum 69.0.3.

Un saludo.

Muchas gracias por avisar, ahora lo correguiré.

Y si, tienes un problema de encoding en el ejemplo final. La estructura del HTML la tienes bastante mal, supongo que lo has creado con algun editor WYSWYG o algo por el estilo. Te recomendaria meter los estilos [<style>] y los meta [<meta>] dentro del <head> (estándar de programación). Además siempre es aconsejable meter el meta charset o señalar el tipo de encoding que se usa.
Código
  1. <meta charset='UTF-8'>
Escribí todo el código a mano en el notepad++ de Android. Muchas veces me salta el problema del encoding de la nada. Se me pone un caracter (espacio?) invisible entre cada palabra. Ni idea de porque pasa. En mi navegador no los veo, yo la web la veo perfecta, no me salen los � en samsung browser.
No puse ninguno de los metadatos recomendados. Tipo idioma y esa cosas. No es solo para buscadores?

Cita de: !drvy
Tampoco te aconsejo que centres el texto porque acaba cansando la lectura sobre todo en pantallas anchas. Creo que te vas a beneficiar mucho si adoptas markdown como formato para escribir tutoriales.
Agradezco muchísimo este tipo de consejos, porque yo nunca me doy cuenta de este tipo de cosas y cambiarlas es muy sencillo. Miraré markdown para adaptarlo.


Cita de: !drvy
Por lo demás, el tutorial guay, aunque te recomendaria que uses ES6 pues ya estamos casi en 2020 y la gente quiere ver cosas con ES6 xD
Gracias.
Se resumen en: Yo y la retrocompatibilidad. Aún hay mucho Android con navegador por defecto que no tira por ES6 ni WebGl2.0.
En línea

Mi perfil de patrocinadores de GitHub está activo! Puedes patrocinarme para apoyar mi trabajo de código abierto 💖

Páginas: [1] Ir Arriba Respuesta Imprimir 

Ir a:  

Mensajes similares
Asunto Iniciado por Respuestas Vistas Último mensaje
Publican un vídeo musical hecho con HTML5 y WebGL presentado en Google I/O
Noticias
wolfbcn 0 1,207 Último mensaje 16 Mayo 2011, 12:50 pm
por wolfbcn
Browsergame HTML5 de Robots para practicar javascript
Scripting
Prozac20mg 1 2,252 Último mensaje 14 Noviembre 2013, 22:12 pm
por ivancea96
quiero saber como crear una biblioteca de graficos en c.
Dudas Generales
sudomauro9000 2 2,583 Último mensaje 14 Marzo 2014, 03:02 am
por sudomauro9000
HTML5 O javascript para formularios
Desarrollo Web
OssoH 7 2,868 Último mensaje 28 Febrero 2014, 19:09 pm
por joz_z
Sugerencias para tutorial WebGL?
Desarrollo Web
@XSStringManolo 0 1,345 Último mensaje 14 Octubre 2019, 15:49 pm
por @XSStringManolo
WAP2 - Aviso Legal - Powered by SMF 1.1.21 | SMF © 2006-2008, Simple Machines