const esfera1litepos = [
0.000000,1.000000,-0.000000,
0.707107,0.707107,-0.000000,
0.000000,0.707107,-0.707107,
1.000000,0.000000,-0.000000,
0.707107,0.000000,-0.707107,
0.000000,0.000000,-1.000000,
-0.707107,0.707107,-0.000000,
-0.707107,0.000000,-0.707107,
-1.000000,0.000000,-0.000000,
0.000000,0.707107,0.707107,
-0.707107,0.000000,0.707107,
0.000000,0.000000,1.000000,
0.707107,0.000000,0.707107,
0.000000,-1.000000,-0.000000,
0.000000,-0.707107,-0.707107,
0.707107,-0.707107,-0.000000,
-0.707107,-0.707107,-0.000000,
0.000000,-0.707107,0.707107,
];
const esfera1liteind = [
0,1,2,
1,3,4,
1,4,2,
2,4,5,
0,2,6,
2,5,7,
2,7,6,
6,7,8,
0,6,9,
6,8,10,
6,10,9,
9,10,11,
0,9,1,
9,11,12,
9,12,1,
1,12,3,
13,14,15,
14,5,4,
14,4,15,
15,4,3,
13,16,14,
16,8,7,
16,7,14,
14,7,5,
13,17,16,
17,11,10,
17,10,16,
16,10,8,
13,15,17,
15,3,12,
15,12,17,
17,12,11,
];
const varilla1pos = [
6.000000,0.210847,-0.000000,
6.000000,0.105424,-0.182599,
-6.000000,0.105423,-0.182599,
-6.000000,0.210847,-0.000000,
6.000000,-0.105424,-0.182599,
-6.000000,-0.105424,-0.182599,
6.000000,-0.210847,0.000000,
-6.000000,-0.210848,0.000000,
6.000000,-0.105424,0.182599,
-6.000000,-0.105424,0.182599,
6.000000,0.105424,0.182599,
-6.000000,0.105423,0.182599,
];
const varilla1ind = [
0,1,2,
2,3,0,
1,4,5,
5,2,1,
4,6,7,
7,5,4,
6,8,9,
9,7,6,
8,10,11,
11,9,8,
10,0,3,
3,11,10,
];
const varilla2pos = [
4.500000,0.210847,-0.000000,
4.500000,0.105424,-0.182599,
-4.500000,0.105423,-0.182599,
-4.500000,0.210847,-0.000000,
4.500000,-0.105424,-0.182599,
-4.500000,-0.105424,-0.182599,
4.500000,-0.210847,0.000000,
-4.500000,-0.210848,0.000000,
4.500000,-0.105424,0.182599,
-4.500000,-0.105424,0.182599,
4.500000,0.105424,0.182599,
-4.500000,0.105423,0.182599,
];
const varilla2ind = [
0,1,2,
2,3,0,
1,4,5,
5,2,1,
4,6,7,
7,5,4,
6,8,9,
9,7,6,
8,10,11,
11,9,8,
10,0,3,
3,11,10,
];
const cuerda1pos = [
0.100000,0.000000,-0.000000,
0.050000,0.000000,-0.086603,
0.050000,5.000000,-0.086603,
0.100000,5.000000,-0.000000,
-0.050000,0.000000,-0.086603,
-0.050000,5.000000,-0.086603,
-0.100000,0.000000,0.000000,
-0.100000,5.000000,0.000000,
-0.050000,0.000000,0.086603,
-0.050000,5.000000,0.086603,
0.050000,0.000000,0.086603,
0.050000,5.000000,0.086603,
];
const cuerda1ind = [
0,1,2,
2,3,0,
1,4,5,
5,2,1,
4,6,7,
7,5,4,
6,8,9,
9,7,6,
8,10,11,
11,9,8,
10,0,3,
3,11,10,
];
const esfera1pos = [
0.000000,1.000000,-0.000000,
0.273267,0.961938,-0.000000,
0.084444,0.961938,-0.259892,
0.525731,0.850651,-0.000000,
0.361803,0.894427,-0.262866,
0.162460,0.850651,-0.500000,
0.738175,0.674609,-0.000000,
0.617865,0.740398,-0.264677,
0.442653,0.740398,-0.505835,
0.228109,0.674609,-0.702046,
0.894427,0.447214,-0.000000,
0.822619,0.505721,-0.259892,
0.688191,0.525731,-0.500000,
0.501375,0.505721,-0.702046,
0.276393,0.447214,-0.850651,
-0.221077,0.961938,-0.160622,
-0.138197,0.894427,-0.425325,
-0.425325,0.850651,-0.309017,
-0.060792,0.740398,-0.669414,
-0.344290,0.740398,-0.577300,
-0.597196,0.674609,-0.433888,
0.007031,0.505721,-0.862668,
-0.262866,0.525731,-0.809017,
-0.512752,0.505721,-0.693780,
-0.723607,0.447214,-0.525731,
-0.221077,0.961938,0.160622,
-0.447214,0.894427,0.000000,
-0.425325,0.850651,0.309017,
-0.655436,0.740398,-0.149044,
-0.655436,0.740398,0.149044,
-0.597196,0.674609,0.433889,
-0.818274,0.505721,-0.273266,
-0.850651,0.525731,0.000000,
-0.818274,0.505721,0.273267,
-0.723607,0.447214,0.525731,
0.084444,0.961938,0.259892,
-0.138197,0.894427,0.425325,
0.162460,0.850651,0.500000,
-0.344290,0.740398,0.577300,
-0.060792,0.740398,0.669414,
0.228109,0.674609,0.702046,
-0.512752,0.505721,0.693780,
-0.262865,0.525731,0.809017,
0.007032,0.505721,0.862668,
0.276393,0.447214,0.850651,
0.361803,0.894427,0.262866,
0.442653,0.740398,0.505835,
0.617865,0.740398,0.264677,
0.501375,0.505721,0.702046,
0.688191,0.525731,0.500000,
0.822619,0.505721,0.259892,
0.959253,0.232454,0.160622,
0.959253,0.232454,-0.160622,
0.951056,0.000000,0.309017,
1.000000,0.000000,0.000000,
0.951056,0.000000,-0.309017,
0.870463,-0.232454,0.433889,
0.955352,-0.255124,0.149044,
0.955352,-0.255124,-0.149044,
0.870463,-0.232454,-0.433889,
0.723607,-0.447214,0.525731,
0.818274,-0.505721,0.273267,
0.850651,-0.525731,0.000000,
0.818274,-0.505721,-0.273266,
0.723607,-0.447214,-0.525731,
0.449186,0.232454,-0.862668,
0.143665,0.232454,-0.961938,
0.587785,0.000000,-0.809017,
0.309017,0.000000,-0.951056,
-0.000000,0.000000,-1.000000,
0.681640,-0.232454,-0.693780,
0.436969,-0.255124,-0.862537,
0.153471,-0.255124,-0.954651,
-0.143665,-0.232454,-0.961938,
0.512752,-0.505721,-0.693780,
0.262866,-0.525731,-0.809017,
-0.007031,-0.505721,-0.862668,
-0.276393,-0.447214,-0.850651,
-0.681640,0.232454,-0.693780,
-0.870463,0.232454,-0.433888,
-0.587785,0.000000,-0.809017,
-0.809017,0.000000,-0.587785,
-0.951056,0.000000,-0.309017,
-0.449186,-0.232454,-0.862668,
-0.685290,-0.255124,-0.682121,
-0.860502,-0.255124,-0.440963,
-0.959253,-0.232454,-0.160622,
-0.501375,-0.505721,-0.702046,
-0.688191,-0.525731,-0.500000,
-0.822619,-0.505721,-0.259892,
-0.894427,-0.447214,0.000000,
-0.870463,0.232454,0.433889,
-0.681640,0.232454,0.693781,
-0.951056,0.000000,0.309017,
-0.809017,0.000000,0.587785,
-0.587785,0.000000,0.809017,
-0.959253,-0.232454,0.160622,
-0.860502,-0.255124,0.440963,
-0.685290,-0.255124,0.682121,
-0.449186,-0.232454,0.862669,
-0.822619,-0.505721,0.259892,
-0.688191,-0.525731,0.500000,
-0.501375,-0.505721,0.702047,
-0.276393,-0.447214,0.850651,
0.143665,0.232454,0.961938,
0.449186,0.232454,0.862668,
0.000000,0.000000,1.000000,
0.309017,0.000000,0.951056,
0.587785,0.000000,0.809017,
-0.143664,-0.232454,0.961938,
0.153471,-0.255124,0.954651,
0.436969,-0.255124,0.862537,
0.681640,-0.232454,0.693780,
-0.007031,-0.505721,0.862668,
0.262866,-0.525731,0.809017,
0.512752,-0.505721,0.693780,
0.809017,0.000000,-0.587785,
0.685290,0.255124,-0.682121,
0.860502,0.255124,-0.440963,
-0.309017,0.000000,-0.951057,
-0.436969,0.255124,-0.862537,
-0.153471,0.255124,-0.954651,
-1.000000,0.000000,0.000000,
-0.955352,0.255124,0.149044,
-0.955352,0.255124,-0.149044,
-0.309017,0.000000,0.951057,
-0.153471,0.255124,0.954651,
-0.436969,0.255124,0.862537,
0.809017,0.000000,0.587785,
0.860502,0.255124,0.440963,
0.685290,0.255124,0.682121,
0.000000,-1.000000,-0.000000,
-0.084444,-0.961938,-0.259892,
0.221077,-0.961938,-0.160622,
-0.162460,-0.850651,-0.500000,
0.138197,-0.894427,-0.425325,
0.425325,-0.850651,-0.309017,
-0.228109,-0.674609,-0.702046,
0.060792,-0.740398,-0.669414,
0.344290,-0.740398,-0.577300,
0.597196,-0.674609,-0.433889,
-0.273267,-0.961938,0.000000,
-0.525731,-0.850651,0.000000,
-0.361803,-0.894427,-0.262866,
-0.738175,-0.674609,0.000000,
-0.617865,-0.740398,-0.264677,
-0.442653,-0.740398,-0.505835,
-0.084444,-0.961938,0.259892,
-0.162460,-0.850651,0.500000,
-0.361803,-0.894427,0.262866,
-0.228108,-0.674609,0.702046,
-0.442653,-0.740398,0.505835,
-0.617865,-0.740398,0.264677,
0.221077,-0.961938,0.160622,
0.425325,-0.850651,0.309017,
0.138197,-0.894427,0.425325,
0.597196,-0.674609,0.433889,
0.344290,-0.740398,0.577300,
0.060792,-0.740398,0.669414,
0.447214,-0.894427,0.000000,
0.655436,-0.740398,-0.149044,
0.655436,-0.740398,0.149044,
];
// This array defines each face as two triangles, using the
// indices into the vertex array to specify each triangle's
// position.
const esfera1ind = [
0,1,2,
1,3,4,
1,4,2,
2,4,5,
3,6,7,
3,7,4,
4,7,8,
4,8,5,
5,8,9,
6,10,11,
6,11,7,
7,11,12,
7,12,8,
8,12,13,
8,13,9,
9,13,14,
0,2,15,
2,5,16,
2,16,15,
15,16,17,
5,9,18,
5,18,16,
16,18,19,
16,19,17,
17,19,20,
9,14,21,
9,21,18,
18,21,22,
18,22,19,
19,22,23,
19,23,20,
20,23,24,
0,15,25,
15,17,26,
15,26,25,
25,26,27,
17,20,28,
17,28,26,
26,28,29,
26,29,27,
27,29,30,
20,24,31,
20,31,28,
28,31,32,
28,32,29,
29,32,33,
29,33,30,
30,33,34,
0,25,35,
25,27,36,
25,36,35,
35,36,37,
27,30,38,
27,38,36,
36,38,39,
36,39,37,
37,39,40,
30,34,41,
30,41,38,
38,41,42,
38,42,39,
39,42,43,
39,43,40,
40,43,44,
0,35,1,
35,37,45,
35,45,1,
1,45,3,
37,40,46,
37,46,45,
45,46,47,
45,47,3,
3,47,6,
40,44,48,
40,48,46,
46,48,49,
46,49,47,
47,49,50,
47,50,6,
6,50,10,
10,51,52,
51,53,54,
51,54,52,
52,54,55,
53,56,57,
53,57,54,
54,57,58,
54,58,55,
55,58,59,
56,60,61,
56,61,57,
57,61,62,
57,62,58,
58,62,63,
58,63,59,
59,63,64,
14,65,66,
65,67,68,
65,68,66,
66,68,69,
67,70,71,
67,71,68,
68,71,72,
68,72,69,
69,72,73,
70,64,74,
70,74,71,
71,74,75,
71,75,72,
72,75,76,
72,76,73,
73,76,77,
24,78,79,
78,80,81,
78,81,79,
79,81,82,
80,83,84,
80,84,81,
81,84,85,
81,85,82,
82,85,86,
83,77,87,
83,87,84,
84,87,88,
84,88,85,
85,88,89,
85,89,86,
86,89,90,
34,91,92,
91,93,94,
91,94,92,
92,94,95,
93,96,97,
93,97,94,
94,97,98,
94,98,95,
95,98,99,
96,90,100,
96,100,97,
97,100,101,
97,101,98,
98,101,102,
98,102,99,
99,102,103,
44,104,105,
104,106,107,
104,107,105,
105,107,108,
106,109,110,
106,110,107,
107,110,111,
107,111,108,
108,111,112,
109,103,113,
109,113,110,
110,113,114,
110,114,111,
111,114,115,
111,115,112,
112,115,60,
64,70,59,
70,67,116,
70,116,59,
59,116,55,
67,65,117,
67,117,116,
116,117,118,
116,118,55,
55,118,52,
65,14,13,
65,13,117,
117,13,12,
117,12,118,
118,12,11,
118,11,52,
52,11,10,
77,83,73,
83,80,119,
83,119,73,
73,119,69,
80,78,120,
80,120,119,
119,120,121,
119,121,69,
69,121,66,
78,24,23,
78,23,120,
120,23,22,
120,22,121,
121,22,21,
121,21,66,
66,21,14,
90,96,86,
96,93,122,
96,122,86,
86,122,82,
93,91,123,
93,123,122,
122,123,124,
122,124,82,
82,124,79,
91,34,33,
91,33,123,
123,33,32,
123,32,124,
124,32,31,
124,31,79,
79,31,24,
103,109,99,
109,106,125,
109,125,99,
99,125,95,
106,104,126,
106,126,125,
125,126,127,
125,127,95,
95,127,92,
104,44,43,
104,43,126,
126,43,42,
126,42,127,
127,42,41,
127,41,92,
92,41,34,
60,56,112,
56,53,128,
56,128,112,
112,128,108,
53,51,129,
53,129,128,
128,129,130,
128,130,108,
108,130,105,
51,10,50,
51,50,129,
129,50,49,
129,49,130,
130,49,48,
130,48,105,
105,48,44,
131,132,133,
132,134,135,
132,135,133,
133,135,136,
134,137,138,
134,138,135,
135,138,139,
135,139,136,
136,139,140,
137,77,76,
137,76,138,
138,76,75,
138,75,139,
139,75,74,
139,74,140,
140,74,64,
131,141,132,
141,142,143,
141,143,132,
132,143,134,
142,144,145,
142,145,143,
143,145,146,
143,146,134,
134,146,137,
144,90,89,
144,89,145,
145,89,88,
145,88,146,
146,88,87,
146,87,137,
137,87,77,
131,147,141,
147,148,149,
147,149,141,
141,149,142,
148,150,151,
148,151,149,
149,151,152,
149,152,142,
142,152,144,
150,103,102,
150,102,151,
151,102,101,
151,101,152,
152,101,100,
152,100,144,
144,100,90,
131,153,147,
153,154,155,
153,155,147,
147,155,148,
154,156,157,
154,157,155,
155,157,158,
155,158,148,
148,158,150,
156,60,115,
156,115,157,
157,115,114,
157,114,158,
158,114,113,
158,113,150,
150,113,103,
131,133,153,
133,136,159,
133,159,153,
153,159,154,
136,140,160,
136,160,159,
159,160,161,
159,161,154,
154,161,156,
140,64,63,
140,63,160,
160,63,62,
160,62,161,
161,62,61,
161,61,156,
156,61,60,
];
const varilla3pos = [
7.500000,0.210847,-0.000000,
7.500000,0.105424,-0.182599,
-7.500000,0.105423,-0.182599,
-7.500000,0.210847,-0.000000,
7.500000,-0.105424,-0.182599,
-7.500000,-0.105424,-0.182599,
7.500000,-0.210847,0.000000,
-7.500000,-0.210848,0.000000,
7.500000,-0.105424,0.182599,
-7.500000,-0.105424,0.182599,
7.500000,0.105424,0.182599,
-7.500000,0.105423,0.182599,
];
const varilla3ind = [
0,1,2,
2,3,0,
1,4,5,
5,2,1,
4,6,7,
7,5,4,
6,8,9,
9,7,6,
8,10,11,
11,9,8,
10,0,3,
3,11,10,
];
var transformaciones = {
comandos: [
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: 1,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
//comandos: [],
//hijos: [],
},
{
position: varilla3pos,
indices: varilla3ind,
numvertices: 36,
modoilum: 2,
color: 1,
//comandos: [],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
//esrelview: 1,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
//esrelview: 1,
comandos: [
{
nombre: "translate",
x: 7.5,
y: 0,
z: 0,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_unico",
x: 0,
y: 0,
z: 1,
grados: 180,
},
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -0.7,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 2,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 3,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
esrelview: 1,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
//hijos: [],
},
],
},
],
},
],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 4,
comandos: [
{
nombre: "translate",
x: -7.5,
y: 0,
z: 0,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_unico",
x: 0,
y: 0,
z: 1,
grados: 180,
},
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -1.22,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 3,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
//hijos: [],
},
],
},
],
},
],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 3,
comandos: [
{
nombre: "translate",
x: 0,
y: 0,
z: 7.5,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_unico",
x: 0,
y: 0,
z: 1,
grados: 180,
},
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -0.25,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 3,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 4,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -2.2,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 0,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 2,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
//hijos: [],
},
],
},
],
}
],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -2.2,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 4,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 2,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 2,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
//hijos: [],
},
],
},
],
}
],
},
],
},
],
},
],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 3,
comandos: [
{
nombre: "translate",
x: 0,
y: 0,
z: -7.5,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_unico",
x: 0,
y: 0,
z: 1,
grados: 180,
},
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -1,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 4,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 2,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -1.5,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 3,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 1,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 0,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
//hijos: [],
},
],
},
],
}
],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 2,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
hijos: [
{
position: cuerda1pos,
indices: cuerda1ind,
numvertices: 36,
modoilum: 1,
color: -1,
comandos: [
{
nombre: "rotate_permanente",
x: 0,
y: 1,
z: 0,
coefvel: -1.2,
},
],
hijos: [
{
position: varilla1pos,
indices: varilla1ind,
numvertices: 36,
modoilum: 2,
color: 1,
comandos: [
{
nombre: "translate",
x: 0,
y: 5,
z: 0,
},
],
hijos: [
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 4,
comandos: [
{
nombre: "scale",
x: 1.3,
y: 1.3,
z: 1.3,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 3,
comandos: [
{
nombre: "translate",
x: 6,
y: 0,
z: 0,
},
],
//hijos: [],
},
{
position: esfera1litepos,
indices: esfera1liteind,
numvertices: 96,
modoilum: 1,
color: 3,
comandos: [
{
nombre: "translate",
x: -6,
y: 0,
z: 0,
},
],
//hijos: [],
},
],
},
],
}
],
},
],
},
],
},
],
},
],
},
{
position: varilla3pos,
indices: varilla3ind,
numvertices: 36,
modoilum: 2,
color: 2,
comandos: [
{
nombre: "rotate_unico",
x: 0,
y: 1,
z: 0,
grados: 90,
},
],
//hijos: [],
},
],
};
var cubeRotation = 0.0;
var glc = document.getElementById("glcanvas");
//esfera
//var numVertices = 960;
//varilla3
//var numVertices = 36;
//prueba
//var numVertices = 18;
main();
//
// Start here
//
function main() {
const canvas = document.querySelector('#glcanvas');
const gl = canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
// If we don't have a GL context, give up now
if (!gl) {
alert('Unable to initialize WebGL. Your browser or machine may not support it.');
return;
}
// Vertex shader program
const vsSource = `
attribute vec4 aVertexPosition;
attribute vec4 aVertexColor;
uniform mat4 uModelViewMatrix;
uniform mat4 uProjectionMatrix;
varying lowp vec4 vColor;
void main(void) {
gl_Position = uProjectionMatrix * uModelViewMatrix * aVertexPosition;
vColor = aVertexColor;
}
`;
// Fragment shader program
const fsSource = `
varying lowp vec4 vColor;
void main(void) {
gl_FragColor = vColor;
}
`;
// Initialize a shader program; this is where all the lighting
// for the vertices and so forth is established.
const shaderProgram = initShaderProgram(gl, vsSource, fsSource);
// Collect all the info needed to use the shader program.
// Look up which attributes our shader program is using
// for aVertexPosition, aVevrtexColor and also
// look up uniform locations.
const programInfo = {
program: shaderProgram,
attribLocations: {
vertexPosition: gl.getAttribLocation(shaderProgram, 'aVertexPosition'),
vertexColor: gl.getAttribLocation(shaderProgram, 'aVertexColor'),
},
uniformLocations: {
projectionMatrix: gl.getUniformLocation(shaderProgram, 'uProjectionMatrix'),
modelViewMatrix: gl.getUniformLocation(shaderProgram, 'uModelViewMatrix'),
},
};
var then = 0;
var eyePos = [-0.0, 4.0, -35.0];
var dist = 35.22;
//var modelViewMatrix = mat4.create();
var sal = mat4.create();
// Draw the scene repeatedly
function render(now) {
now *= 0.001; // convert to seconds
const deltaTime = now - then;
then = now;
//drawScenePrevio ini
gl.clearColor(0.0, 0.0, 0.0, 1.0); // Clear to black, fully opaque
gl.clearDepth(1.0); // Clear everything
gl.enable(gl.DEPTH_TEST); // Enable depth testing
gl.depthFunc(gl.LEQUAL); // Near things obscure far things
// Clear the canvas before we start drawing on it.
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
// Create a perspective matrix, a special matrix that is
// used to simulate the distortion of perspective in a camera.
// Our field of view is 45 degrees, with a width/height
// ratio that matches the display size of the canvas
// and we only want to see objects between 0.1 units
// and 100 units away from the camera.
const fieldOfView = 45 * Math.PI / 180; // in radians
const aspect = glc.clientWidth / glc.clientHeight;
const zNear = 0.1;
const zFar = 100.0;
const projectionMatrix = mat4.create();
// note: glmatrix.js always has the first argument
// as the destination to receive the result.
mat4.perspective(projectionMatrix,
fieldOfView,
aspect,
zNear,
zFar);
//drawScenePrevio fin
// Set the drawing position to the "identity" point, which is
// the center of the scene.
var modelViewMatrix = mat4.create();
var sel = document.getElementById("sz_tot").value;
if (sel === 'first') {
mat4.lookAt(modelViewMatrix, [0,-1.5,0], [0,-8,0], [1,0,0]);
}
else if (sel === 'third') {
/*mat4.translate(modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to translate
[-0.0, 4.0, -35.0]); // amount to translate
//var modelViewMatrixN2 = mat4.create();
mat4.rotate(modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to rotate
cubeRotation * 0.7,// amount to rotate in radians
[1, 0, 0]); // axis to rotate around (X)
*/
/*eyePos[1] = Math.sin(cubeRotation * 0.7) * dist;
eyePos[2] = Math.cos(cubeRotation * 0.7) * dist;
mat4.lookAt(modelViewMatrix,
eyePos,
[0,0,0],
[0,1,0]
);*/
var vector3traslacion = [0,0,0];
//var vector3cerocerocero = [0,0,0];
mat4.getTranslation(vector3traslacion, sal);
//mat4.getTranslation(vector3cerocerocero, modelViewMatrix);
/*var salinv = mat4.invert(mat4.create(), sal);
var vector3salinv = [0,0,0];
mat4.getTranslation(vector3salinv, salinv);
var mvminv = mat4.invert(mat4.create, modelViewMatrix);
var multinv = mat4.create();
mat4.mul(multinv, sal, mvminv);
var vector3multinv = mat4.getTranslation(vec3.create(), multinv);*/
/*var offset2 = mat4.fromTranslation(mat4.create(), [4.0, 0.0, 4.0]);
eyePos = mat4.create();
mat4.mul(eyePos, eyePos, offset2);
var resta = [0,0,0];
vec3.subtract(resta, vector3traslacion, [0.0, -4.0, 35.0]);*/
//vec3.negate(vector3traslacion, vector3traslacion);
//console.log("sal="+sal);
//console.log("vector3traslacion="+vector3traslacion);
//console.log("resta="+resta);
//console.log("vector3salinv="+vector3salinv);
//console.log("vector3multinv="+vector3multinv);
//console.log("seleccion="+document.getElementById("sz_tot").value);
/*mat4.translate(sal, // destination matrix
sal, // matrix to translate
[0.0, 0.0, 15.0]); // amount to translate
var v3tras_n2 = [0,0,0];
mat4.getTranslation(v3tras_n2, sal);*/
//console.log("v3tras_n2="+v3tras_n2);
//funciona bien
//mat4.lookAt(modelViewMatrix, [-0.0, 4.0, -35.0], [0,0,0], [0,1,0]);
var eyePos = vec3.clone(vector3traslacion);
eyePos[2] -= 8;
mat4.lookAt(modelViewMatrix, eyePos, vector3traslacion, [0,1,0]);
/*mat4.translate(modelViewMatrix, modelViewMatrix, [4.0, 0.0, 0]);*/
//mat4.rotate(modelViewMatrix, modelViewMatrix, -Math.PI/2, [1,0,0]);
/*var offset = mat4.fromTranslation(mat4.create(), [4.0, 0.0, 4.0]);
mat4.mul(modelViewMatrix,modelViewMatrix,offset);*/
/*var v3tras_n2 = vec3.clone(vector3traslacion);
v3tras_n2[0] += 15;*/
//mat4.lookAt(modelViewMatrix, [-0.0, 4.0, -35.0], [0,0,0], [0,1,0]);
/*mat4.translate(modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to translate
[-0.0, 4.0, -35.0]); // amount to translate*/
}
else if (sel === 'long'){
mat4.lookAt(modelViewMatrix, [-0.0, 4.0, -35.0], [0,-6,0], [0,1,0]);
}
sal = draw_recursion(gl, programInfo, projectionMatrix, mat4.create(), transformaciones, modelViewMatrix);
// Update the rotation for the next draw
cubeRotation += deltaTime;
requestAnimationFrame(render);
}
requestAnimationFrame(render);
}
function draw_recursion(gl, programInfo, projectionMatrix, modelViewMatrix, transf, mvmini) {
var mvm = mat4.clone(modelViewMatrix);
var sal = 0;
if (transf.comandos) {
transf.comandos.forEach(function (comando) {
if (comando.nombre == "translate") {
mat4.translate(mvm, // destination matrix
mvm, // matrix to translate
[comando.x, comando.y, comando.z]); // amount to translate
}
else if (comando.nombre == "rotate_permanente") {
mat4.rotate(mvm, // destination matrix
mvm, // matrix to rotate
cubeRotation * comando.coefvel,// amount to rotate in radians
[comando.x, comando.y, comando.z]);// axis to rotate around (X)
}
else if (comando.nombre == "rotate_unico") {
mat4.rotate(mvm, // destination matrix
mvm, // matrix to rotate
(comando.grados * Math.PI / 180),// amount to rotate in radians
[comando.x, comando.y, comando.z]); // axis to rotate around (X)
}
else if (comando.nombre == "scale") {
mat4.scale(mvm,
mvm,
[comando.x, comando.y, comando.z]);
}
}
);
}
if (transf.position && transf.indices && transf.numvertices && transf.modoilum) {
// Here's where we call the routine that builds all the
// objects we'll be drawing.
var buffers = initBuffers(gl, transf.position, transf.indices, transf.numvertices, transf.modoilum, transf.color);
/*if (transf.esrelview) {
var vector3traslacion;
mat4.getTranslation(vector3traslacion, mvm);
var v3tras_n2 = vec3.clone(vector3traslacion);
v3tras_n2[2] = v3tras_n2[2] - 15.0;
mat4.lookAt(mvm, v3tras_n2,vector3traslacion, [0,1,0]);
}*/
var finalmvm = mat4.mul(mat4.create(), mvmini, mvm);
drawScene(gl, programInfo, buffers, projectionMatrix, finalmvm, transf.numvertices);
}
if (transf.hijos) {
transf.hijos.forEach(function (hijo) {
var salcand = draw_recursion(gl, programInfo, projectionMatrix, mvm, hijo, mvmini);
if (salcand != 0) sal = salcand;
}
);
}
if (transf.esrelview) {
sal = mat4.clone(mvm);
}
return sal;
}
//
// initBuffers
//
// Initialize the buffers we'll need. For this demo, we just
// have one object -- a simple three-dimensional cube.
//
function initBuffers(gl, positions, indices, numVertices, modoIlum, customcolor) {
// Create a buffer for the cube's vertex positions.
const positionBuffer = gl.createBuffer();
// Select the positionBuffer as the one to apply buffer
// operations to from here out.
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
// Now create an array of positions for the cube.
var positions2 = [];
var indices2 = [];
//var positions = varilla3pos;
//var indices = varilla3ind;
var indcont = 0;
for (var ai = 0; ai < numVertices; ai++) {
positions2.push(positions[3*indices[ai]]);
indices2[indcont] = indcont;
indcont++;
positions2.push(positions[3*indices[ai] + 1]);
indices2[indcont] = indcont;
indcont++;
positions2.push(positions[3*indices[ai] + 2]);
indices2[indcont] = indcont;
indcont++;
}
/*console.log("positions2=");
console.log(positions2);
console.log("indices2=");
console.log(indices2);*/
// Now pass the list of positions into WebGL to build the
// shape. We do this by creating a Float32Array from the
// JavaScript array, then use it to fill the current buffer.
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions2), gl.STATIC_DRAW);
// Now set up the colors for the faces. We'll use solid colors
// for each face.
const faceColors = [
[1.0, 0.0, 0.0, 1.0], // Back face: red
[0.75, 0.0, 0.75, 1.0], // Left face: purple
[0.0, 0.5, 0.0, 1.0], // Top face: green
[1.0, 0.5, 0.0, 1.0], // Bottom face: orange
[1.0, 1.0, 0.0, 1.0], // Right face: yellow
[1.0, 1.0, 1.0, 1.0], // Front face: white
];
// Convert the array of colors into a table for all the vertices.
var colors = [];
for (var j = 0; j < numVertices; ++j) {
var c = [];
var num = ((positions2[3*j] + 1)*0.9 + 0.2)/2.0;
if (modoIlum == 2)
num = ((positions2[3*j + 1] + 1)*0.9 + 0.2)/2.0;
if (customcolor != -1) {
c.push(faceColors[customcolor][0] * num);
c.push(faceColors[customcolor][1] * num);
c.push(faceColors[customcolor][2] * num);
c.push(1.0);
}
else {
//var num = Math.random();
c.push(num);
//var num = Math.random();
c.push(num);
//var num = Math.random();
c.push(num);
c.push(1.0);
}
colors = colors.concat(c);
}
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
// Build the element array buffer; this specifies the indices
// into the vertex arrays for each face's vertices.
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
// Now send the element array to GL
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
new Uint16Array(indices2), gl.STATIC_DRAW);
return {
position: positionBuffer,
color: colorBuffer,
indices: indexBuffer,
};
}
//
// Draw the scene.
//
function drawScene(gl, programInfo, buffers, projectionMatrix, modelViewMatrix, numVertices) {
// Now move the drawing position a bit to where we want to
// start drawing the square.
/* mat4.translate(modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to translate
[-0.0, 0.0, -15.0]); // amount to translate
mat4.rotate(modelViewMatrix, // destination matrix
modelViewMatrix, // matrix to rotate
cubeRotation,// amount to rotate in radians
[0, 1, 0]); // axis to rotate around (X)*/
// Tell WebGL how to pull out the positions from the position
// buffer into the vertexPosition attribute
{
const numComponents = 3;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.position);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexPosition,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexPosition);
}
// Tell WebGL how to pull out the colors from the color buffer
// into the vertexColor attribute.
{
const numComponents = 4;
const type = gl.FLOAT;
const normalize = false;
const stride = 0;
const offset = 0;
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.color);
gl.vertexAttribPointer(
programInfo.attribLocations.vertexColor,
numComponents,
type,
normalize,
stride,
offset);
gl.enableVertexAttribArray(
programInfo.attribLocations.vertexColor);
}
// Tell WebGL which indices to use to index the vertices
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.indices);
// Tell WebGL to use our program when drawing
gl.useProgram(programInfo.program);
// Set the shader uniforms
gl.uniformMatrix4fv(
programInfo.uniformLocations.projectionMatrix,
false,
projectionMatrix);
gl.uniformMatrix4fv(
programInfo.uniformLocations.modelViewMatrix,
false,
modelViewMatrix);
{
const vertexCount = numVertices;
const type = gl.UNSIGNED_SHORT;
const offset = 0;
gl.drawElements(gl.TRIANGLES, vertexCount, type, offset);
//console.log("vertexCount="+vertexCount);
}
}
//
// Initialize a shader program, so WebGL knows how to draw our data
//
function initShaderProgram(gl, vsSource, fsSource) {
const vertexShader = loadShader(gl, gl.VERTEX_SHADER, vsSource);
const fragmentShader = loadShader(gl, gl.FRAGMENT_SHADER, fsSource);
// Create the shader program
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
// If creating the shader program failed, alert
if (!gl.getProgramParameter(shaderProgram, gl.LINK_STATUS)) {
alert('Unable to initialize the shader program: ' + gl.getProgramInfoLog(shaderProgram));
return null;
}
return shaderProgram;
}
//
// creates a shader of the given type, uploads the source and
// compiles it.
//
function loadShader(gl, type, source) {
const shader = gl.createShader(type);
// Send the source to the shader object
gl.shaderSource(shader, source);
// Compile the shader program
gl.compileShader(shader);
// See if it compiled successfully
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
alert('An error occurred compiling the shaders: ' + gl.getShaderInfoLog(shader));
gl.deleteShader(shader);
return null;
}
return shader;
}
<!-- código de interfaz adaptado de: http://www.dyn-web.com/tutorials/forms/examples/pizza.php -->
<script src="https://rawgit.com/mdn/webgl-examples/gh-pages/tutorial/gl-matrix.js"></script>
<form action="#" method="post" class="demoForm" id="pizzaForm">
<fieldset>
<label><input type="radio" name="size" value="first" /> FirstPerson</label>
<label><input type="radio" name="size" value="third" checked="checked" /> ThirdPerson</label>
<label><input type="radio" name="size" value="long" /> LongShot</label>
<input type="hidden" id="sz_tot" name="sz_tot" value="third" />
</fieldset>
</form>
<canvas id="glcanvas" width="640" height="480"></canvas>
<script type="text/javascript">
function getSizePrice(e) {
this.form.elements['sz_tot'].value = this.value;
//console.log(seleccion);
}
var form = document.getElementById('pizzaForm');
var sz = form.elements['size'];
for (var i=0, len=sz.length; i<len; i++) {
sz[i].onclick = getSizePrice;
}
</script>
canvas { width: 133vw; height: 100vh; display: block }