Usuario:ManuelRomero/WebGL/introduccion - Historial de revisiones

ManuelRomero en 18:41 16 nov 2021

2021-11-16T18:41:29Z

ManuelRomero: /* Qué es webGL */

2021-11-15T16:20:31Z

‎Qué es webGL

ManuelRomero: /* Qué es webGL */

2021-11-15T15:28:31Z

‎Qué es webGL

ManuelRomero: /* Qué es webGL */

2021-11-15T15:17:56Z

‎Qué es webGL

ManuelRomero en 10:25 14 nov 2021

2021-11-14T10:25:55Z

ManuelRomero: /* Empezando */

2021-11-14T10:25:22Z

‎Empezando

ManuelRomero: Página creada con «===Qué es webGL=== *'''''WebGL''''' es una librería o API (?) que permite utilizar OpenGL ES 2.0 dentro de un canvas en una página web.Es un código de control escrito e...»

2021-11-14T10:21:12Z

Página creada con «===Qué es webGL=== *'''''WebGL''''' es una librería o API (?) que permite utilizar OpenGL ES 2.0 dentro de un canvas en una página web.Es un código de control escrito e...»

Página nueva

===Qué es webGL===
*'''''WebGL''''' es una librería o API (?) que permite utilizar OpenGL ES 2.0 dentro de un canvas en una página web.Es un código de control escrito en javasscript, y código shader que se ejecuta en la GPU del un equipo.
*Los elementos WebGL se pueden mezclar con otros elementos HTML y componerse con otras partes de la página o el fondo de la misma.

*WebGL hace posible mostrar increíbles representaciones de gráficos 3D en tiempo real en el navegador, pero lo que muchas personas ignoran es que WebGL es en realidad una API raster, no una API 3D.
===Empezando===

@@ Línea 11: / Línea 11: @@
 La rasterización es el proceso por el cual una imagen descrita en un formato gráfico vectorial se convierte en un conjunto de píxeles o puntos para ser desplegados en un medio de salida digital,
 }}
-*Los datos los debe de recibir la GPU. Hay  de 4 formas:
+*Los datos que queramos usar en estas funciones, los debe de recibir la GPU. Hay  de 4 formas:
 #.-Attributes and Buffers
 #.-Uniforms
 #.-Textures
 #.-Varyings

@@ Línea 12: / Línea 12: @@
 }}
 *Los datos los debe de recibir la GPU. Hay  de 4 formas:
 ===Empezando===

@@ Línea 5: / Línea 5: @@
 *WebGL hace posible mostrar increíbles representaciones de gráficos 3D en tiempo real en el navegador, pero lo que muchas personas ignoran es que WebGL es en realidad una API raster, no una API 3D.
 *'''''WebGl''''' se ejecuta en la GPU del equipo. Hay dos tipos de funciones '''''vertex shaders''''' y '''''fragment shaders''''' (??? MRM)
-*'''''vertex shaders''''' calcula las posiciones de los vértices
+*'''''vertex shaders''''' calcula las posiciones de los vértices. A partir de estos valores se puden '''''rasterizar''''' puntos, líneas, polígonos .....
 {{MRM_Definicion|Title=rasterizar|
 La rasterización es el proceso por el cual una imagen descrita en un formato gráfico vectorial se convierte en un conjunto de píxeles o puntos para ser desplegados en un medio de salida digital,
 }}
 ===Empezando===

@@ Línea 6: / Línea 6: @@
 ===Empezando===
 ;Creamos un elemento '''''cavas'''''
-<source lang=html>
+<source lang=html5>
 <!-- .... -->
 <body onload="start()">

← Revisión anterior		Revisión de 10:25 14 nov 2021
Línea 5:		Línea 5:
	*WebGL hace posible mostrar increíbles representaciones de gráficos 3D en tiempo real en el navegador, pero lo que muchas personas ignoran es que WebGL es en realidad una API raster, no una API 3D.		*WebGL hace posible mostrar increíbles representaciones de gráficos 3D en tiempo real en el navegador, pero lo que muchas personas ignoran es que WebGL es en realidad una API raster, no una API 3D.
	===Empezando===		===Empezando===
		+	;Creamos un elemento '''''cavas'''''
		+	<source lang=html>
		+	<!-- .... -->
		+	<body onload="start()">
		+	<h1>Probando webgl</h1>
		+	<canvas id="glcanvas" width="640" height="480">
		+	Tu navegador parece no soportar el elemento HTML5 <code><canvas></code>.
		+	</canvas>
		+	</body>
		+	<!-- .... -->
		+	</source>
		+	;Escribimos el código de '''''start()'''''
		+	<source lang=javascript>
		+	function start() {
		+	var canvas = document.getElementById("glcanvas");
		+
		+	gl = initWebGL(canvas); // Inicializar el contexto GL
		+
		+	// Solo continuar si WebGL esta disponible y trabajando
		+
		+	if (gl) {
		+	gl.clearColor(0.0, 0.0, 0.0, 1.0); // Establecer el color base en negro, totalmente opaco
		+	gl.enable(gl.DEPTH_TEST); // Habilitar prueba de profundidad
		+	gl.depthFunc(gl.LEQUAL); // Objetos cercanos opacan objetos lejanos
		+	gl.clear(gl.COLOR_BUFFER_BIT\|gl.DEPTH_BUFFER_BIT); // Limpiar el buffer de color asi como el de profundidad
		+	}
		+	}
		+	</source>
		+	;Inicializamos el contexto WebGL
		+	<source lang=javascript>
		+	var gl; // Un variable global para el contexto WebGL
		+	function initWebGL(canvas) {
		+	gl = null;
		+
		+	try {
		+	// Tratar de tomar el contexto estandar. Si falla, retornar al experimental.
		+	gl = canvas.getContext("webgl") \|\| canvas.getContext("experimental-webgl");
		+	}
		+	catch(e) {}
		+
		+	// Si no tenemos ningun contexto GL, date por vencido ahora
		+	if (!gl) {
		+	alert("Imposible inicializar WebGL. Tu navegador puede no soportarlo.");
		+	gl = null;
		+	}
		+	gl.viewport(0, 0, canvas.width, canvas.height);
		+
		+
		+	return gl;
		+	}
		+	</source>