Tutorial WebGL (Biblioteca de Gráficos 3D para la Web) javascript, HTML5, GLSL..

Iniciado por @XSStringManolo, 15 Octubre 2019, 02:20 AM

0 Miembros y 1 Visitante están viendo este tema.

Imprimir
Ir Abajo Páginas1
Acciones del Usuario

@XSStringManolo

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

zellion

#1
15 Octubre 2019, 10:04 AM
Buenas String:

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

Código [Seleccionar]
<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.

#!drvy

#2
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 (html5) [Seleccionar]
<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

@XSStringManolo

#3
15 Octubre 2019, 11:13 AM
Cita de: zellion en 15 Octubre 2019, 10:04 AM
Buenas String:

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

Código [Seleccionar]
<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é.

Cita de: #!drvy 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 (html5) [Seleccionar]
<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: !drvyTampoco 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: !drvyPor 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.
Imprimir
Ir Arriba Páginas1
Acciones del Usuario