Inicio a programación grafica, Diapositivas de Programación C

¡Descarga Inicio a programación grafica y más Diapositivas en PDF de Programación C solo en Docsity!

PROGRAMACIÓN

GRÁFICA

PARA LA WEB

M.Sc. Ing. Juan Pablo Luna Felipez

Ingeniería Informática

Universidad Nacional “Siglo XX”

Llallagua, Bolivia

Septiembre, 2021

• I Fundamentos
  • 1.1 Programación Grafica
  • 1.2 Sistema de Coordenadas
  • 1.3 OpenGL
  • 1.4 WebGL
  • 1.5 Three.JS
  • 1.6 Estructura básica de un programa de grafico 3D para la WEB
• II Objetos Primitivos Gráficos
  • 2.1 Objetos para la Creación de Primitivos
  • 2.2 Objetos Primitivos 2D
    • 2.2.1 La Linea
    • 2.2.2 El Circulo
    • 2.2.3 Elipse
    • 2.2.4 Curva de Bezier
    • 2.2.5 Plano
  • 2.3 Objetos Primitivos 3D
    • 2.3.1 Cubo
    • 2.3.2 Esfera
    • 2.3.3. Toroide
    • 2.3.4 Cono
    • 2.3.5 Cilindro
    • 2.3.6 Dodecaedro
    • 2.3.7 Icosaedro
    • 2.3.8 Tubo
    • 2.3.9 Nudo Toroidal
• III Transformaciones de objetos
  • 3.1 Representación matricial
  • 3.2 Traslación
  • 3.3 Rotación
  • 3.4 Escalación
• IV Vistas y Proyecciones
  • 4.1 Proyecciones
  • 4.2 Proyección paralela o cilíndrica
  • 4.3 Estableciendo una proyección Ortogonal
  • 4.4 Proyección Perspectiva o Cónica
  • 4.5 Estableciendo una Proyección en perspectiva
• V Luces e Iluminación
  • 5.1 Luz Ambiental
  • 5.2 Luz Direccional
  • 5.3 Luz Puntual
  • 5.4 Luz de Área
  • 5.5 Luz Spot
  • 5.6 Luz Hemiesfera
• VI Materiales
  • 6.1 MeshBasicMaterial
  • 6.2 MeshLambertMaterial
  • 6.3 MeshPhongMaterial
  • 6.4 MeshStandardMaterial
  • 6.5 MeshPhysicalMaterial
  • 6.6 MeshToonMaterial
  • 6.7 Propiedades de los materiales
    • 6.7.1 Color
    • 6.7.2 Emisividad
    • 6.7.3 FlatShading
    • 6.7.4 Brillo
    • 6.7.5 Wireframe
• VII Texturas
  • 7.1 Carga y aplicación de Texturas
  • 7.2 Mezclas
    • 7.2.1 NormalBlending
    • 7.2.2 AdditiveBlending
    • 7.2.3 SubtractiveBlending
    • 7.2.4 MultiplyBlending
    • 7.2.5 CustomBlending
  • 7.3 Ejemplo
• VIII Carga de modelos 3D
  • 8.1 Carga de Modelos FBX
  • 8.2 Carga de Archivos GLB
• IX Animaciones
  • 9.1 Carga de animaciones de modelos FBX
  • 9.2 Carga de animaciones de modelos GLB
  • 9.3 Ejemplo completo de animación de personaje

I FUNDAMENTOS

1.1 Programación Grafica

La revolución en el uso de gráficos para mostrar la información a través de diversos

dispositivos es vital para cualquier sistema, hoy en día gracias a ello existen diversidad de

nuevas tecnologías como la Realidad Virtual, Realidad Aumentada, Realidad Mixta, Visión

Artificial, Procesamiento digital de Imágenes, Desarrollo de Juegos, Hologramas y otros

que tienen gran impacto debido al alto manejo de elementos gráficos.

La Programación Gráfica se encarga de procesar, generar, almacenar, manipular,

visualizar datos gráficos digitales, es decir información gráfica que puede ser: imágenes

(en dos o tres dimensiones), animaciones, imágenes interactivas (realidad virtual, realidad

aumentada, realidad mixta), etc.

Aplicación 3D Sistema Solar

Aplicación Web 3D Sistema Solar

1.5 Three.JS

Emplea WEBGL para los procesos de realizar los procesos de dibujado, ThreeJS maneja

elementos mas complejos como escenas, iluminación, luces, sombras, materiales,

texturas, etc, que se tendría que trabajar bastante al emplear directamente en WEBGL

Three.Js entre sus componentes tiene tres elementos fundamentales para crear una

aplicación WEB 3D

Scene: Representa la escena tridimensional, esta compuesto por diferentes los diferentes

objetos que se insertaran dentro del mundo virtual.

Camera: Es una cámara virtual que representa a una cámara real, obtiene una porción de

la escena virtual generada, a partir de su posicionamiento y enfoque.

Renderer: Es uno de los objetos principales, ya que se encarga de renderizar la parte

visible por la camara de toda la escena 3D

También es necesario trabajar con dos métodos o funciones principales en un programa

que implementa three.js para crear sitios web con contenido 3D, estas funciones son: la

función init y la función animate

Función init: La función función init inicializa la escena y se llama una vez al inicio

durante la carga de script en la pagina web, por tanto se debe iniciar el objeto Scene con

todos sus objetos tridimensionales requeridos y su s configuraciones deseadas, también

se debe inicializar y configurar el objeto Camera y finalmente también se debe inicializar

el objeto renderizados con sus configuradas deseadas.

Función animate: La función animate es la función que actualiza los procesos de

dibujado de la pagina WEB en cada frame, por tanto se llama constantemente

dependiendo de la tasa de actualización que se da en cuadros por segundo, en esta

función deberá realizarse los procesos de actualización de los objetos que se

transformaran, de las posiciones, movimientos, etc.

Para su funcionamiento implementa requestAnimateFrame que es una función que enviá

una solicitud al navegador para realizar procesos de actualización, redibujado, animación

en una pagina web

1.6 Estructura básica de un programa de grafico 3D para la WEB

A continuación se presenta la estructura básica de un programa para trabajar con la

tecnología three.js en nuestras paginas webs.

texto

II OBJETOS PRIMITIVOS GRÁFICOS

Los objetos primitivos son figuras geométricas básicas elementales y que a partir de ellas

permiten crear objetos compuestos, escenas, etc.

Los objetos primitivos en 2D son la linea, la curva, la circunferencia, la elipse, el plano, etc.

En cambio los objetos primitivos en 3D, también denominados sólidos primitivos son: el

plano, el cubo, la esfera, Toroide, Cono, Tubo, etc.

WebApp en base a la primitiva gráfica linea

2.1 Objetos para la Creación de Primitivos

Para crear objetos primitivos empleando Three.js requerimos tres objetos básicos: malla

(mesh),geometría (geometry) y material(material).

Malla (Mesh)

En three.js los objetos primitivos se generan a partir de un objeto Mesh, un objeto mesh o

malla, es un objeto genérico compuesto a su vez de dos objetos: el objeto Geometry que

define la geometría de mesh y el objeto material, que asigna un material al mesh.

Una ventaja de que una malla tenga esa estructura es que se puede crear dos objetos con

la misma geometría, por ejemplo dos cubos de diferente color, o también a su vez dos

objetos con el mismo material, por ejemplo un cubo y una esfera con el color rojo y sus

propiedades.

Geometría (Geometry)

Representa la geometría de un objeto, el cual esta compuesto a su vez por vértices y

caras con una disposición de acuerdo a la geometría deseada como triángulos,

cuadrados, rectángulos, cubos, esferas, curvas, etc.

Material

Un material representa las propiedades que se aplican a la superficie de un objeto como el

color, brillo, textura, normales, etc.

2.2 Objetos Primitivos 2D

Entre los objetos primitivos básicos tenemos la línea, la circunferencia, la curva, etc.

2.2.1 La Linea

Una linea es una sucesión continua y recta de puntos que se forma a partir de un punto

inicial y otro punto final.

Podemos graficar lineas empleando la clase Line

Su sintaxis es:

Line( geometry : BufferGeometry, material : Material )

Donde:

Geometry : Vértices que representan los segmentos de línea. El valor predeterminado es

una geometría de tipo BufferGeometry.

Material : Es el material que se apicará a la línea. El valor predeterminado es un material

de tipo LineBasicMaterial.

Programa para graficar Lineas.

//IMPORTANDO LAS CLASES NECESARIAS

import * as THREE from '../../three/build/three.module.js'; var scene; var camera;

Resultado:

2.2.2 El Circulo

Un circulo es una curva cerrada, donde todos sus puntos están a la misma distancia del

centro, es una forma simple de geometría euclidiana y que se construye a partir de una

serie de segmentos triangulares con origen en el puntos central y se extienden hasta un

radio determinado.

Podemos graficar círculos empleando la clase CircleGeometry

Su sintaxis es:

CircleGeometry (radius: Float , segments: Integer , thetaStart: Float , thetaLength: Float )

Donde:

radius: Es el radio del círculo, por defecto su valor es 1.

segments: número de segmentos (triángulos), mínimo 3, valor por defecto 8.

thetaStart: ángulo de inicio para el primer segmento, por defecto 0 (posición de las tres en

punto).

ThetaLength: El ángulo central, a menudo llamado theta al sector circular. El valor

predeterminado es 2 * Pi, lo que lo convierte en un círculo completo.

Programa para graficar el primitivo grafico circulo

//IMPORTANDO LAS CLASES NECESARIAS

import * as THREE from '../../three/build/three.module.js'; var scene; var camera; var renderer; var circle; var circle1; function init() { //inicializamos la escena scene = new THREE.Scene(); //inicializamos la camara camera = new THREE.PerspectiveCamera( 75 , window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5 ; //inicializamos el renderizador renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //Definimos nuestra geometria const radius= 2 ; const segments= 12 ; const geometry = new THREE.CircleGeometry(radius, segments); const material = new THREE.MeshBasicMaterial( { color: 0x990000 } ); const wire_material = new THREE.MeshBasicMaterial( { color: 0x999999, wireframe: true} ); circle = new THREE.Mesh( geometry, material ); circle1 = new THREE.Mesh( geometry, wire_material ); //Adicionamos los objetos a la escena scene.add( circle ); scene.add( circle1 ); } function animate() { requestAnimationFrame(animate ); circle.rotation.x += 0.001; circle.rotation.y += 0.001;

yRadius : Representa el radio de la elipse en la dirección y. El valor predeterminado es 1.

aStartAngle : Representa el ángulo de inicio de la curva en radianes a partir del eje X

positivo. El valor predeterminado es 0.

aEndAngle : Representa el ángulo final de la curva en radianes a partir del eje X positivo.

Por defecto es 2 x Math.PI.

aClockwise: Representa si la elipse se dibuja en el sentido de las agujas del reloj. El valor

predeterminado es falso.

aRotación : Representa el ángulo de rotación de la elipse en radianes, en sentido

antihorario desde el eje X positivo (opcional). El valor predeterminado es 0.

Programa para graficar el primitivo Elipse.

//IMPORTANDO LAS CLASES NECESARIAS

import * as THREE from '../../three/build/three.module.js'; var scene; var camera; var renderer; var primitive; function init() { //inicializamos la escena scene = new THREE.Scene(); //inicializamos la camara camera = new THREE.PerspectiveCamera( 75 , window.innerWidth / window.innerHeight, 0.1, 1000 ); camera.position.z = 5 ; //inicializamos el renderizador renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //Definimos nuestra geometria const curve = new THREE.EllipseCurve( 0 , 0 , // centerx, centerY

2 , 3 , // xRadius, yRadius 0 , 2 * Math.PI, // StartAngle, EndAngle false, // Clockwise 0 // Rotation ); const points = curve.getPoints( 50 ); const geometry = new THREE.BufferGeometry().setFromPoints( points ); const material = new THREE.LineBasicMaterial( { color : 0xffff00} ); // Create the final object to add to the scene primitive = new THREE.Line( geometry, material ); scene.add(primitive); renderer.render( scene, camera ); } function animate() { requestAnimationFrame(animate ); primitive.rotation.x += 0.001; primitive.rotation.y += 0.001; renderer.render( scene, camera ); } //Llamamos a los metodos init(); animate();

renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); //Definimos nuestra geometria const curve = new THREE.CubicBezierCurve( new THREE.Vector2( - 5 , 0 ), new THREE.Vector2( 7 , 4 ), new THREE.Vector2( - 7 , 4 ), new THREE.Vector2( 5 , 0 ) ); const points = curve.getPoints( 50 ); const geometry = new THREE.BufferGeometry().setFromPoints( points ); const material = new THREE.LineBasicMaterial( { color : 0xff0000 } ); // Create the final object to add to the scene primitive = new THREE.Line( geometry, material ); scene.add(primitive); renderer.render( scene, camera ); } function animate() { requestAnimationFrame(animate ); primitive.rotation.x += 0.001; primitive.rotation.y += 0.001; renderer.render( scene, camera ); } //Llamamos a los metodos init(); animate();

Resultado

2.2.5 Plano

El plano es un objeto ideal de dos dimensiones, es una superficie compuesta por longitud

y anchura.

Podemos graficar una plano empleando la clase PlaneGeometry

Su sintaxis es:

PlaneGeometry(width : Float, height : Float, widthSegments : Integer, heightSegments :

Integer)

Donde:

width: Es el ancho a lo largo del eje X. El valor predeterminado es 1.

height: Es el alto a lo largo del eje Y. El valor predeterminado es 1.

widthSegments: segmentos que tendra el plano a lo largo del eje X, es opcional. El valor

predeterminado es 1.

heightSegments: Segmentos que tendra el plano a lo largo del eje Y, es un valor opcional.

El valor predeterminado es 1.

Programa para graficar el primitivo plano.

//IMPORTANDO LAS CLASES NECESARIAS

import * as THREE from '../../three/build/three.module.js'; var scene; var camera; var renderer; var primitive3D; var wire_primitive3D; function init() { //inicializamos la escena scene = new THREE.Scene(); //inicializamos la camara camera = new THREE.PerspectiveCamera( 75 , window.innerWidth / window.innerHeight, 0.1, 1000 );