Skip to content
Snippets Groups Projects
Commit 96256e7d authored by mimarti's avatar mimarti
Browse files

Subir nuevo archivo

parent 0bfb681d
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 1067 additions and 0 deletions
Persona.html 0 → 100644
+ 1067
− 0
View file @ 96256e7d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="./style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="checkbox.css">
<link rel="stylesheet" type="text/css" href="radiobuttons.css">
<link rel="stylesheet" type="text/css" href="sliderAmbiente.css">
<link rel="stylesheet" type="text/css" href="sliderDifusa.css">
<!-- Colocamos el canvas a la derecha de los sliders y demás con float:right-->
<title>Práctica 3</title>
<style>
body{ background-color: grey; }
canvas{ background-color: white;
border: 1px solid black;
float:right;
}
div{ display:block;
}
/* CheckBox de las luces del modelo de phong */
#luces {
padding:10px 10px;
padding-right: 40px;
margin-left:60px;
}
/* Colocar el radio button de las texturas*/
#texturas {
margin-left: 100px;
}
/* Colocar los sliders*/
#sliders {
margin-left: 100px;
}
/* Colocar el canvas*/
#canvass{
margin-left:300px;
}
</style>
<!-- ********
*************** SCRIPTS DE WEBGL ****************
*******-->
<script>
// ****************** Variables Globales
var gl = null,
canvas = null,
glProgram = null,
fragmentShader = null,
vertexShader = null;
var positionLocatAttrib =null,
colorLocatAttrib=null;
var VerticeBuffer = null;
var Vertices=null; //coord de los vértices
var IndexVerticeBuffer=null;
var IndVertices=null; //indices de los triangulos
var VerticeColors=null, //colores
VerticeColorBuffer; //buffer de colores a cada vertice
//TEXTURAS
let textureCoord, texture,texBuffer;//textura
let uTexture;
/* Para uso del Ratoon*/
let ratonAbajo = false;
let posRatonX = null;
let posRatonY = null;
let MvMatrix=null,
PMatrix=null;
let uMvmatrix=null, uPMatrix;
var normales, normalLocatAttrib=null,normalBuffer;
//Inicializaciones
var uLuzDifusa;
var uDirLuz;
var uLuzAmbiente;
var coordirecc=[0.57,0.0,0.0];//[1,0,0] coord mundo
var intdif=0;
var intamb=0;
var textura="";
/* ************** FUNCIONES AUXILIARES *************** */
/* ************** INITWEBGL ****************/
function initWebGL(){
canvas = document.getElementById("canvas");
gl = canvas.getContext("webgl");
if(gl)
{
setupWebGL();
initShaders();
deteccionRaton();
setupBuffers();
drawScene();
animacion();
}
else{
alert( "El navegador no soporta WEBGL.");
}
}
/* ************** SETUPWEBGL ****************/
function setupWebGL()
{
//Pone el color de fondo a verde ---para 2d no funciona
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
//Crea un viewport del tamaño del canvas
gl.viewport(0, 0, canvas.width, canvas.height);
// Modo ON DEPTH
gl.enable(gl.DEPTH_TEST);
inicializarMatrices();
}
/********************* 3. INIT SHADER **************************************/
function initShaders()
{
// Esta función inicializa los shaders
//1.Obtengo la referencia de los shaders
var fs_source = document.getElementById('fragment-shader').innerHTML;
var vs_source = document.getElementById('vertex-shader').innerHTML;
//2. Compila los shaders
vertexShader = makeShader(vs_source, gl.VERTEX_SHADER);
fragmentShader = makeShader(fs_source, gl.FRAGMENT_SHADER);
//3. Crea un programa
glProgram = gl.createProgram();
//4. Adjunta al programa cada shader
gl.attachShader(glProgram, vertexShader);
gl.attachShader(glProgram, fragmentShader);
gl.linkProgram(glProgram);
if (!gl.getProgramParameter(glProgram, gl.LINK_STATUS)) {
alert("No se puede inicializar el Programa .");
}
//5. Usa el programa
gl.useProgram(glProgram);
}
/********************* 3.1. MAKE SHADER **************************************/
function makeShader(src, type)
{
//Compila cada shader
var shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert("Error de compilación del shader: " + gl.getShaderInfoLog(shader));
}
return shader;
}
/************ ***********************/
function deteccionRaton(){
canvas.onmousedown=pulsaRatonAbajo;
document.onmouseup=pulsaRatonArriba;
document.onmousemove=mueveRaton;
}
function inicializarMatrices(){
MvMatrix=mat4.create();
PMatrix=mat4.create();
mat4.identity(MvMatrix);
mat4.identity(PMatrix);
mat4.perspective(PMatrix,20, canvas.width/canvas.height, 1, 100);
mat4.lookAt(MvMatrix,[1, 1, 1.5],[ 0, 0, 0],[0, 1, 0]);
}
function pulsaRatonAbajo(event) {
ratonAbajo = true;
posRatonX = event.clientX;
posRatonY = event.clientY;
}
function pulsaRatonArriba(event) {
ratonAbajo = false;
}
function mueveRaton(event) {
if (!ratonAbajo) {
return;
}
let nuevaX = event.clientX;
let nuevaY = event.clientY;
let deltaX = nuevaX - posRatonX;
let deltaY = nuevaY - posRatonY;
let idMatrix=mat4.create();
mat4.identity(idMatrix);
mat4.rotate(idMatrix,idMatrix,degToRad(deltaX/2), [0,1,0]);
mat4.rotate(idMatrix,idMatrix,degToRad(deltaY/2), [1,0,0]);
mat4.multiply(MvMatrix,MvMatrix,idMatrix);
posRatonX = nuevaX;
posRatonY = nuevaY;
}
function setTexture(texture){
gl.bindTexture(gl.TEXTURE_2D,texture);
gl.texImage2D(gl.TEXTURE_2D,0,gl.RGBA,gl.RGBA, gl.UNSIGNED_BYTE, texture.image );
// parámetros de filtrado
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
// parámetros de repetición (ccordenadas de textura mayores a uno)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
// creación del mipmap
gl.generateMipmap(gl.TEXTURE_2D);
//gl.bindTexture(gl.TEXTURE_2D, null);
}
function setupBuffers(){
// Coordenadas del cubo
Vertices = [
// Front faceCuerpo
-0.1, -0.6, 0.2,
0.1, -0.6, 0.2,
0.1, 0.4, 0.2,
-0.1, 0.4, 0.2,
// Back faceCuerpo
-0.1, -0.6, -0.2,
-0.1, 0.4, -0.2,
0.1, 0.4, -0.2,
0.1, -0.6, -0.2,
// Top faceCuerpo
-0.1, 0.4, -0.2,
-0.1, 0.4, 0.2,
0.1, 0.4, 0.2,
0.1, 0.4, -0.2,
// Bottom faceCuerpo
-0.1, -0.6, -0.2,
0.1, -0.6, -0.2,
0.1, -0.6, 0.2,
-0.1, -0.6, 0.2,
// Right faceCuerpo
0.1, -0.6, -0.2,
0.1, 0.4, -0.2,
0.1, 0.4, 0.2,
0.1, -0.6, 0.2,
// Left faceCuerpo
-0.1, -0.6, -0.2,
-0.1, -0.6, 0.2,
-0.1, 0.4, 0.2,
-0.1, 0.4, -0.2,
// Front faceCabeza
-0.3, 0.4, 0.2,
0.3, 0.4, 0.2,
0.3, 0.8, 0.2,
-0.3, 0.8, 0.2,
// Back faceCabeza
-0.3, 0.4, -0.2,
-0.3, 0.8, -0.2,
0.3, 0.8, -0.2,
0.3, 0.4, -0.2,
// Top faceCabeza
-0.3, 0.8, -0.2,
-0.3, 0.8, 0.2,
0.3, 0.8, 0.2,
0.3, 0.8, -0.2,
// Bottom faceCabeza
-0.3, 0.4, -0.2,
0.3, 0.4, -0.2,
0.3, 0.4, 0.2,
-0.3, 0.4, 0.2,
// Right faceCabeza
0.3, 0.4, -0.2,
0.3, 0.8, -0.2,
0.3, 0.8, 0.2,
0.3, 0.4, 0.2,
// Left faceCabeza
-0.3, 0.4, -0.2,
-0.3, 0.4, 0.2,
-0.3, 0.8, 0.2,
-0.3, 0.8, -0.2,
// Front faceDcha
0.1, 0.2, 0.2,
0.5, 0.2, 0.2,
0.5, 0.3, 0.2,
0.1, 0.3, 0.2,
// Back faceDcha
0.1, 0.2, -0.2,
0.1, 0.3, -0.2,
0.5, 0.3, -0.2,
0.5, 0.2, -0.2,
// Top faceDcha
0.1, 0.3, -0.2,
0.1, 0.3, 0.2,
0.5, 0.3, 0.2,
0.5, 0.3, -0.2,
// Bottom faceDcha
0.1, 0.2, -0.2,
0.5, 0.2, -0.2,
0.5, 0.2, 0.2,
0.1, 0.2, 0.2,
// Right faceDcha
0.5, 0.2, -0.2,
0.5, 0.3, -0.2,
0.5, 0.3, 0.2,
0.5, 0.2, 0.2,
// Left face2Dcha
0.1, 0.2, -0.2,
0.1, 0.2, 0.2,
0.1, 0.3, 0.2,
0.1, 0.3, -0.2,
// Front faceIzda
-0.1, 0.2, 0.2,
-0.5, 0.2, 0.2,
-0.5, 0.3, 0.2,
-0.1, 0.3, 0.2,
// Back faceIzda
-0.1, 0.2, -0.2,
-0.1, 0.3, -0.2,
-0.5, 0.3, -0.2,
-0.5, 0.2, -0.2,
// Top faceIzda
-0.1, 0.3, -0.2,
-0.1, 0.3, 0.2,
-0.5, 0.3, 0.2,
-0.5, 0.3, -0.2,
// Bottom faceIzda
-0.1, 0.2, -0.2,
-0.5, 0.2, -0.2,
-0.5, 0.2, 0.2,
-0.1, 0.2, 0.2,
// Right faceIzda
-0.5, 0.2, -0.2,
-0.5, 0.3, -0.2,
-0.5, 0.3, 0.2,
-0.5, 0.2, 0.2,
// Left Izda
-0.1, 0.2, -0.2,
-0.1, 0.2, 0.2,
-0.1, 0.3, 0.2,
-0.1, 0.3, -0.2,
// Front faceIzdaAbajo
-0.1, -0.7, 0.2,
-0.4, -0.7, 0.2,
-0.4, -0.6, 0.2,
-0.1, -0.6, 0.2,
// Back faceIzdaAbajo
-0.1, -0.7, -0.2,
-0.1, -0.6, -0.2,
-0.4, -0.6, -0.2,
-0.4, -0.7, -0.2,
// Top faceIzdaAbajo
-0.1, -0.6, -0.2,
-0.1, -0.6, 0.2,
-0.4, -0.6, 0.2,
-0.4, -0.6, -0.2,
// Bottom faceIzdaAbajo
-0.1, -0.7, -0.2,
-0.4, -0.7, -0.2,
-0.4, -0.7, 0.2,
-0.1, -0.7, 0.2,
// Right faceIzdaAbajo
-0.4, -0.7, -0.2,
-0.4, -0.6, -0.2,
-0.4, -0.6, 0.2,
-0.4, -0.7, 0.2,
// Left faceIzdaAbajo
-0.1, -0.7, -0.2,
-0.1, -0.7, 0.2,
-0.1, -0.6, 0.2,
-0.1, -0.6, -0.2,
// Front faceDchaAbajo
0.1, -0.7, 0.2,
0.4, -0.7, 0.2,
0.4, -0.6, 0.2,
0.1, -0.6, 0.2,
// Back faceDchaAbajo
0.1, -0.7, -0.2,
0.1, -0.6, -0.2,
0.4, -0.6, -0.2,
0.4, -0.7, -0.2,
// Top faceDchaAbajo
0.1, -0.6, -0.2,
0.1, -0.6, 0.2,
0.4, -0.6, 0.2,
0.4, -0.6, -0.2,
// Bottom faceDchaAbajo
0.1, -0.7, -0.2,
0.4, -0.7, -0.2,
0.4, -0.7, 0.2,
0.1, -0.7, 0.2,
// Right faceDchaAbajo
0.4, -0.7, -0.2,
0.4, -0.6, -0.2,
0.4, -0.6, 0.2,
0.4, -0.7, 0.2,
// Left faceDchaAbajo
0.1, -0.7, -0.2,
0.1, -0.7, 0.2,
0.1, -0.6, 0.2,
0.1, -0.6, -0.2,
// Front face Balon
0.5, -1.0, 0.1,
0.7, -1.0, 0.1,
0.7, -0.8, 0.1,
0.5, -0.8, 0.1,
// Back face Balon
0.5, -1.0, -0.1,
0.5, -0.8, -0.1,
0.7, -0.8, -0.1,
0.7, -1.0, -0.1,
// Top face Balon
0.5, -0.8, -0.1,
0.5, -0.8, 0.1,
0.7, -0.8, 0.1,
0.7, -0.8, -0.1,
// Bottom face Balon
0.5, -1.0, -0.1,
0.7, -1.0, -0.1,
0.7, -1.0, 0.1,
0.5, -1.0, 0.1,
// Right face Balon
0.7, -1.0, -0.1,
0.7, -0.8, -0.1,
0.7, -0.8, 0.1,
0.7, -1.0, 0.1,
// Left face Balon
0.5, -1.0, -0.1,
0.5, -1.0, 0.1,
0.5, -0.8, 0.1,
0.5, -0.8, -0.1
];
//Buffer para los vertices
// BUffer que almacena los vértices
VerticeBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, VerticeBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(Vertices), gl.DYNAMIC_DRAW);
VerticeBuffer.itemSize = 3;
VerticeBuffer.numItems = 168;
/** INDICES VERTICES **/
IndexVerticeBuffer= gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IndexVerticeBuffer);
IndVertices= [
0, 1, 2, 0, 2, 3, // Front face
4, 5, 6, 4, 6, 7, // Back face
8, 9, 10, 8, 10, 11, // Top face
12, 13, 14, 12, 14, 15, // Bottom face
16, 17, 18, 16, 18, 19, // Right face
20, 21, 22, 20, 22, 23, // Left face
24, 25, 26, 24, 26, 27, // Front face
28,29,30, 28,30,31, // Back face
32,33,34, 32,34,35, // Top face
36,37,38, 36,38,39, // Bottom face
40,41,42, 40,42,43, // Right face
44,45,46, 44,46,47, // Left face
48,49,50, 48,50,51, // Front face
52,53,54, 52,54,55, // Back face
56,57,58, 56,58,59, // Top face
60,61,62, 60,62,63, // Bottom face
64,65,66, 64,66,67, // Right face
68,69,70, 68,70,71, // Left face
72,73,74, 72,74,75, // Front face
76,77,78, 76,78,79, // Back face
80,81,82, 80,82,83, // Top face
84,85,86, 84,86,87, // Bottom face
88,89,90, 88,90,91, // Right face
92,93,94, 92,94,95, // Left face
96,97,98, 96,98,99, // Front face
100,101,102, 100,102,103, // Back face
104,105,106, 104,106,107, // Top face
108,109,110, 108,110,111, // Bottom face
112,113,114, 112,114,115, // Right face
116,117,118, 116,118,119, // Left face
120, 121, 122, 120, 122, 123, // Front face
124, 125, 126, 124, 126, 127, // Back face
128, 129, 130, 128, 130, 131, // Top face
132, 133, 134, 132, 134, 135, // Bottom face
136, 137, 138, 136, 138, 139, // Right face
140, 141, 142, 140, 142, 143, // Left face
144, 145, 146, 144, 146, 147, // Front face
148,149,150, 148,150,151, // Back face
152,153,154, 152,154,155, // Top face
156,157,158, 156,158,159, // Bottom face
160,161,162, 160,162,163, // Right face
164,165,166, 164,166,167, // Left face
];
IndexVerticeBuffer.itemSize = 1;
IndexVerticeBuffer.numItems = 252;
/*
** NORMALES
*/
normales = [ // Normal
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, // v1-v6-v7-v2 left
0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, // v0-v1-v2-v3 front
0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, // v4-v7-v6-v5 back
0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, // v0-v5-v6-v1 top
0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, 0.0,-1.0, 0.0, // v7-v4-v3-v2 down
1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, 1.0, 0.0, 0.0, // v0-v3-v4-v5 right
-1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0, -1.0, 0.0, 0.0 // v1-v6-v7-v2 left
];
normalBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,normalBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normales), gl.STATIC_DRAW);
/* *******************************
** TEXTURAS
* *******************************/
/**** PONER COORD TEXTURAS ***/
// Texture coordinates
var textureCoord = [
0,0, 0.5,0, 0.5,0, 0.5,1, // Front
0,0, 0.5,0, 0.5,0, 0.5,1, // Back
0,0, 0.5,0, 0.5,0, 0.5,1, // Top
0,0, 0.5,0, 0.5,0, 0.5,1, // Bottom
0,0, 0.5,0, 0.5,0, 0.5,1, //Right
0,0, 0.5,0, 0.5,0, 0.5,1, //Left
0,0, 0.5,0, 0.5,0, 0.5,1, // Front
0,0, 0.5,0, 0.5,0, 0.5,1, // Back
0,0, 0.5,0, 0.5,0, 0.5,1, // Top
0,0, 0.5,0, 0.5,0, 0.5,1, // Bottom
0,0, 0.5,0, 0.5,0, 0.5,1, //Right
0,0, 0.5,0, 0.5,0, 0.5,1, //Left
0,0, 0.5,0, 0.5,0, 0.5,1, // Front
0,0, 0.5,0, 0.5,0, 0.5,1, // Back
0,0, 0.5,0, 0.5,0, 0.5,1, // Top
0,0, 0.5,0, 0.5,0, 0.5,1, // Bottom
0,0, 0.5,0, 0.5,0, 0.5,1, //Right
0,0, 0.5,0, 0.5,0, 0.5,1, //Left
0,0, 0.5,0, 0.5,0, 0.5,1, // Front
0,0, 0.5,0, 0.5,0, 0.5,1, // Back
0,0, 0.5,0, 0.5,0, 0.5,1, // Top
0,0, 0.5,0, 0.5,0, 0.5,1, // Bottom
0,0, 0.5,0, 0.5,0, 0.5,1, //Right
0,0, 0.5,0, 0.5,0, 0.5,1, //Left
0,0, 0.5,0, 0.5,0, 0.5,1, // Front
0,0, 0.5,0, 0.5,0, 0.5,1, // Back
0,0, 0.5,0, 0.5,0, 0.5,1, // Top
0,0, 0.5,0, 0.5,0, 0.5,1, // Bottom
0,0, 0.5,0, 0.5,0, 0.5,1, //Right
0,0, 0.5,0, 0.5,0, 0.5,1, //Left
0,0, 0.5,0, 0.5,0, 0.5,1, // Front
0,0, 0.5,0, 0.5,0, 0.5,1, // Back
0,0, 0.5,0, 0.5,0, 0.5,1, // Top
0,0, 0.5,0, 0.5,0, 0.5,1, // Bottom
0,0, 0.5,0, 0.5,0, 0.5,1, //Right
0,0, 0.5,0, 0.5,0, 0.5,1, //Left
0.5,0, 1,0, 0.5,1, 1,1, // Front
0.5,0, 1,0, 0.5,1, 1,1, // Back
0.5,0, 1,0, 0.5,1, 1,1, // Top
0.5,0, 1,0, 0.5,1, 1,1, // Bottom
0.5,0, 1,0, 0.5,1, 1,1, //Right
0.5,0, 1,0, 0.5,1, 1,1, //Left
];
texture = gl.createTexture();
texture.image=new Image();
// texture.image.crossOrigin = "anonymous";
texture.image.onload = function(){
setTexture(texture);
}
texture.image.src="./"+textura;
/******* ACTIVACION DE TEXTURA ****/
gl.activeTexture(gl.TEXTURE0);
/**** CREAR BUFFER DE TEXTURA ***/
texBuffer=gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER,texBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoord), gl.STATIC_DRAW);
/**** LOCALIZAR ATRIBUTO TEXTURA ***/
textureLocatAttrib = gl.getAttribLocation(glProgram, "aTexCoord");
gl.enableVertexAttribArray(textureLocatAttrib);
gl.bindBuffer(gl.ARRAY_BUFFER,texBuffer);
gl.vertexAttribPointer(textureLocatAttrib,2,gl.FLOAT,false,0,0);
/*
** Ponemos LUCES
*/
uLuzDifusa= gl.getUniformLocation(glProgram, "uLuzDifusa");
uDirLuz = gl.getUniformLocation(glProgram, "uDirLuz");
uLuzAmbiente=gl.getUniformLocation(glProgram, "uLuzAmbiente");
uLuzSpecular=gl.getUniformLocation(glProgram, "uLuzSpecular");
gl.uniform3fv(uDirLuz, coordirecc);
// Valor de la luz Ambiente (color)
// Localiza la matriz en el glProgram
uMvMatrix = gl.getUniformLocation(glProgram, 'uMvMatrix');
// Localiza la matriz en el glProgram
uPMatrix = gl.getUniformLocation(glProgram, 'uPMatrix');
uTexture=gl.getUniformLocation(glProgram,'uTexture');
//gl.uniform1i(uTexture,0);
/*****+ VARIABLES de VertexShader *******/
/*
**Buffer para atributos de postion
*/
//Busca dónde debe ir la posicion de los vértices en el programa.
positionLocatAttrib = gl.getAttribLocation(glProgram, "a_VertexPosition");
gl.enableVertexAttribArray(positionLocatAttrib);
//Enlazo con las posiciones de los vértices
gl.bindBuffer(gl.ARRAY_BUFFER, VerticeBuffer);
gl.vertexAttribPointer(positionLocatAttrib, 3, gl.FLOAT, false, 0, 0);
/*
** Buffer para elementos indice de vertices
*/
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, IndexVerticeBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint8Array(IndVertices), gl.STATIC_DRAW);
/*
** Buffer para atributos de normales en el vs
*/
normalLocatAttrib = gl.getAttribLocation(glProgram, "a_Normal");
gl.enableVertexAttribArray(normalLocatAttrib);
gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
gl.vertexAttribPointer(normalLocatAttrib, 3, gl.FLOAT, false, 0, 0);
}
/* ********* DRAWSCENE ***************** */
function drawScene(){
gl.uniformMatrix4fv(uMvMatrix, false, MvMatrix);
gl.uniformMatrix4fv(uPMatrix, false, PMatrix);
gl.drawElements(gl.TRIANGLES, IndexVerticeBuffer.numItems,gl.UNSIGNED_BYTE,0);
}
function degToRad(degrees) {
return degrees * Math.PI / 180;
}
function animacion(){
drawScene();
requestAnimationFrame(animacion);
}
function clickDifusa(){
var checkBox_luz_difusa = document.getElementById("Luz-Difusa");
if (checkBox_luz_difusa.checked == true){
document.getElementById("IntensidadDifusa").disabled = false;
gl.uniform3f(uLuzDifusa, 1.0, 1.0, 1.0);
//setupBuffers();
}else {
document.getElementById("IntensidadDifusa").disabled = true;
gl.uniform3f(uLuzDifusa, 0.0, 0.0,0.0);
// setupBuffers();
}
}
function clickAmbiente(){
var checkBox_luz_ambiente = document.getElementById("Luz-Ambiente");
if (checkBox_luz_ambiente.checked == true){
document.getElementById("IntensidadAmbiente").disabled = false;
gl.uniform3f(uLuzAmbiente, 1.0, 1.0,1.0);
//setupBuffers();
}else {
document.getElementById("IntensidadAmbiente").disabled = true;
gl.uniform3f(uLuzAmbiente, 0.0, 0.0, 0.0);
//setupBuffers();
}
}
function clickEspecular(){
var checkBox_luz_especular = document.getElementById("Luz-Especular");
if (checkBox_luz_especular.checked == true){
gl.uniform3f(uLuzSpecular, 0.5,0.5, 0.5);
setupBuffers();
}else {
console.log("DesPulsao");
gl.uniform3f(uLuzSpecular, 0.0, 0.0, 0.0);
setupBuffers();
}
}
function radioRubi(){
var radioRubi=document.getElementById("Rubi");
if(radioRubi.checked==true){
textura="rubi.jpg";
setupBuffers();
}
}
function radioPiedra(){
var radioPiedra=document.getElementById("Piedra");
if(radioPiedra.checked==true){
textura="piedra.jpg";
setupBuffers();
}
}
function radioOro(){
var radioOro=document.getElementById("Oro");
if(radioOro.checked==true){
textura="Futbol.jpg";
setupBuffers();
}
}
function radioDoble(){
var radioDoble=document.getElementById("Doble");
if(radioDoble.checked==true){
textura="TexturaDoble.jpg";
setupBuffers();
}
}
function cambiarIntensidadAmbiente(){
var sliderAmbiente = document.getElementById("IntensidadAmbiente");
sliderAmbiente.disabled=false;
intamb=sliderAmbiente.value/100;
gl.uniform3f(uLuzAmbiente, intamb, intamb, intamb);
setupBuffers();
}
function cambiarIntensidadDifusa(){
var sliderDifusa = document.getElementById("IntensidadDifusa");
intdif=sliderDifusa.value/100;
gl.uniform3f(uLuzDifusa, intdif, intdif, intdif);
setupBuffers();
}
</script>
<!--*************************************************/
/*************************************************/
/************************************************* -->
<script id="vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_VertexPosition;
//attribute vec4 a_VertexColor;
attribute vec4 a_Normal;
//TEXTURAS
attribute vec2 aTexCoord;
//Textura
varying vec2 vTexCoord;
varying highp vec4 vColor;
uniform mat4 uMvMatrix;
uniform mat4 uPMatrix;
varying vec3 normal;
void main()
{
gl_Position = uPMatrix*uMvMatrix*a_VertexPosition;
normal = mat3(uPMatrix*uMvMatrix)*normalize(a_Normal.xyz);
vTexCoord=aTexCoord;
vColor=vec4(1.0,1.0,1.0,1.0);
}
</script>
<script id="fragment-shader" type="x-shader/x-fragment">
precision mediump float;
varying highp vec4 vColor;
varying vec3 normal;
varying vec2 vTexCoord;
uniform sampler2D uTexture;
uniform vec3 uDirLuz;
uniform vec3 uLuzDifusa;
uniform vec3 uLuzAmbiente;
uniform vec3 uLuzSpecular;
void main()
{
float cos = max(dot(uDirLuz,normal),0.0);
vec3 difusa = uLuzDifusa * cos;
vec3 ambiente=uLuzAmbiente;
float brillo=8.0;
//Especular
vec3 specular = vec3(0.0);
vec3 viewVec = vec3(0.0,0,1.0);
vec3 reflectVec=reflect(-uDirLuz,normal);
specular = uLuzSpecular*pow(max(dot(reflectVec, viewVec), 0.0), brillo);
//vColor=vec4(difusa+ambiente+specular,1.0);
gl_FragColor = vec4(difusa+ambiente+specular,1.0)*texture2D(uTexture,vec2(vTexCoord.s,vTexCoord.t));
}
</script>
<!--/*************************************************************-->
<script type="text/javascript" src="./lib/MV.js"></script>
<script type="text/javascript" src="./lib/cuon-matrix.js"></script>
<script type="text/javascript" src="./gl-matrix-min.js"></script>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<!--**************************************************************/ -->
<!-- **************** *******************-->
<!-- **************** html *******************-->
<!-- **************** *******************-->
<body onload="initWebGL()">
<h1> MIGUEL MARTIN MATEOS </h1>
<div>
<table>
<tr>
<td>
<div id="luces">
<h2>Modelo De Phong </h2>
<label class="container">Luz Difusa
<input type="checkbox" id="Luz-Difusa" onclick="clickDifusa()">
<span class="checkmark"></span>
</label>
<label class="container">Luz Ambiente
<input type="checkbox" id="Luz-Ambiente" onclick="clickAmbiente()">
<span class="checkmark"></span>
</label>
<label class="container">Luz Especular
<input type="checkbox" id="Luz-Especular" onclick="clickEspecular()">
<span class="checkmark"></span>
</label>
</div>
<div id="canvass">
<canvas id="canvas" width="400" height="400">
</canvas>
</div>
<div id="sliders">
<h3>Intensidad Ambiente</h3>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="100" class="slider" id="IntensidadAmbiente" oninput="cambiarIntensidadAmbiente()"disabled>
</div>
<h3>Intensidad Difusa</h3>
<div class="slidecontainer">
<input type="range" min="1" max="100" value="100" class="slider" id="IntensidadDifusa" oninput="cambiarIntensidadDifusa()"disabled>
</div>
</div>
<div id="texturas">
<h3>Texturas </h3>
<label class="container2">Rubi
<input type="radio" name="Textura" id="Rubi" value="1" onclick="radioRubi()">
<span class="checkmark2"></span>
</label>
<label class="container2">Futbol-Oro
<input type="radio" name="Textura" id="Oro" value="2" onclick="radioOro()">
<span class="checkmark2"></span>
</label>
<label class="container2">Piedra
<input type="radio" name="Textura" id="Piedra" value="3" onclick="radioPiedra()">
<span class="checkmark2"></span>
</label>
<label class="container2">Doble Textura
<input type="radio" name="Textura" id="Doble" value="4" onclick="radioDoble()">
<span class="checkmark2"></span>
</label>
</div>
</table>
<div>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment