Малыхин СергейЭто огрызки кода.
Подсказать тут может только хрустальный шар
нужен минимальный но полный пример
Страница: 1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
<html><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>Octahedron</title>
<script src="canvas-matrix.js" type="text/javascript"></script>
<script src="controls.js" type="text/javascript"></script>
<script id="shader-vs" type="x-shader/x-vertex">
attribute vec3 aPos;
uniform mat4 mvMatrix;
uniform mat4 prMatrix;
uniform vec3 normal;
varying vec4 vPos;
varying vec3 rotNorm;
void main(void) {
vPos = mvMatrix * vec4(aPos, 1.);
rotNorm = (mvMatrix * vec4(normal, 0.)).xyz;
gl_Position = prMatrix * vPos;
}
</script>
<script id="shader-fs" type="x-shader/x-fragment">
#ifdef GL_ES
precision highp float;
#endif
varying vec3 rotNorm;
varying vec4 vPos;
const vec3 posSpec = vec3(1., 1., -1.);
void main(void) {
vec3 view = - normalize(vPos.xyz);
float i = max( 0., dot(rotNorm, view) );
vec4 color = vec4(.5*i, .5*i, .5*i, 1.); /*vec4(.9*i, .5*i, 0., 1.)*/
i = .7*pow( max( 0., dot(rotNorm,
normalize(normalize(posSpec-vPos.xyz) + view) )), 150.);
color += vec4(i, i, i, 0.);
gl_FragColor = color;
}
</script>
<script type="text/javascript">
var vertices = [
-1.414,0,0, 0,1.414,0, 0,0,-1.414, 0,0,1.414, 0,-1.414,0, 1.414,0,0
],
ind = [
[3,4,5],[3,5,1],[3,1,0],[3,0,4],[4,0,2],[4,2,5],[2,0,1],[5,2,1]
];
var mvMatrix = new CanvasMatrix4();
var rotMat = new CanvasMatrix4();
var nFaces = ind.length, normLoc, mvMatLoc;
var norm = [];
function webGLStart() {
initGL(); /* Включаем канву */
var size = Math.min(window.innerWidth, window.innerHeight) - 15;
/* Задаём размер канвы */
canvas.width = size; canvas.height = size;
gl.viewport(0, 0, size, size); /*Не играет роли */
var prog = gl.createProgram();
gl.attachShader(prog, getShader( gl, "shader-vs" ));
gl.attachShader(prog, getShader( gl, "shader-fs" ));
gl.linkProgram(prog);
gl.useProgram(prog);
var posLocation = gl.getAttribLocation(prog, "aPos");
gl.enableVertexAttribArray( posLocation );
var posBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, posBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
gl.vertexAttribPointer(posLocation, 3, gl.FLOAT, false, 0, 0);
var app = [];
for(var i=0; i < nFaces; i++){
app = app.concat(ind[i]);
}
var indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(app),
gl.STATIC_DRAW);
normLoc = gl.getUniformLocation(prog,"normal");
for(var i=0; i<nFaces; i++){
var j = 3*ind[i][0];
var v0 = vertices.slice(j,j+3);
j = 3*ind[i][1];
var v1 = vertices.slice(j,j+3);
j = 3*ind[i][2];
var v2 = vertices.slice(j,j+3);
var nx = (v1[1]-v0[1])*(v2[2]-v0[2]) - (v2[1]-v0[1])*(v1[2]-v0[2]);
var ny =-(v1[0]-v0[0])*(v2[2]-v0[2]) + (v2[0]-v0[0])*(v1[2]-v0[2]);
var nz = (v1[0]-v0[0])*(v2[1]-v0[1]) - (v2[0]-v0[0])*(v1[1]-v0[1]);
var n = Math.sqrt(nx*nx + ny*ny + nz*nz);
norm[i] = [nx/n, ny/n, nz/n];
}
var prMatrix = new CanvasMatrix4();
prMatrix.perspective(45, 1, .1, 100);
gl.uniformMatrix4fv( gl.getUniformLocation(prog,"prMatrix"),
false, new Float32Array(prMatrix.getAsArray()) );
rotMat.makeIdentity();
mvMatLoc = gl.getUniformLocation(prog,"mvMatrix");
gl.clearDepth(1.0);
gl.enable(gl.DEPTH_TEST);
gl.clearColor(1, 0, 0, .0); /* Source: .5, .7, 1, 1 */
transl = -4;
rotMat.rotate(65, .5,1,0);
drawScene();
canvas.resize = function (){
var size = Math.min(window.innerWidth, window.innerHeight) - 15;
canvas.width = size; canvas.height = size;
gl.viewport(0, 0, size, size);
drawScene();
}
}
function drawScene(){
/* Отрисовываем, учитывая поворот мышкой по осям*/
rotMat.rotate(xRot/5, 1,0,0);
rotMat.rotate(yRot/5, 0,1,0); //Поворот от мышки
rotMat.rotate(zRot, 0,0,1);
yRot = xRot = zRot = 0;
mvMatrix.load( rotMat );
mvMatrix.translate(0, 0, transl);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv( mvMatLoc, false, new Float32Array(mvMatrix.getAsArray()) );
var off = 0;
for(var i=0; i < nFaces; i++){
gl.uniform3fv( normLoc, norm[i] );
//gl.drawElements(gl.TRIANGLE_FAN
gl.lineWidth(3.5);
gl.drawElements(gl.TRIANGLE_FAN , ind[i].length, gl.UNSIGNED_SHORT, off); /* Визуализация всего этого хозяйства */
//gl.drawElements(gl.LINE_STRIP, ind[i].length, gl.UNSIGNED_SHORT, off); /* Визуализация всего этого хозяйства */
off += 2*ind[i].length;
}
gl.flush ();
}
</script>
</head>
<body onload="webGLStart();" onresize="canvas.resize();">
<canvas id="canvas" width="820" height="820"></canvas>
</body></html>
Скрипт:
canvas-matrix.js
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
166.
167.
168.
169.
170.
171.
172.
173.
174.
175.
176.
177.
178.
179.
180.
181.
182.
183.
184.
185.
186.
187.
188.
189.
190.
191.
192.
193.
194.
195.
196.
197.
198.
199.
200.
201.
202.
203.
204.
205.
206.
207.
208.
209.
210.
211.
212.
213.
214.
215.
216.
217.
218.
219.
220.
221.
222.
223.
224.
225.
226.
227.
228.
229.
230.
231.
232.
233.
234.
235.
236.
237.
238.
239.
240.
241.
242.
243.
244.
245.
246.
247.
248.
249.
250.
251.
252.
253.
254.
255.
256.
257.
258.
259.
260.
261.
262.
263.
264.
265.
266.
267.
268.
269.
270.
271.
272.
273.
274.
275.
276.
277.
278.
279.
280.
281.
282.
283.
284.
285.
286.
287.
288.
289.
290.
291.
292.
293.
294.
295.
296.
297.
298.
299.
300.
301.
302.
303.
304.
305.
306.
307.
308.
309.
310.
311.
312.
313.
314.
315.
316.
317.
318.
319.
320.
321.
322.
323.
324.
325.
326.
327.
328.
329.
330.
331.
332.
333.
334.
335.
336.
337.
338.
339.
340.
341.
342.
343.
344.
345.
346.
347.
348.
349.
350.
351.
352.
353.
354.
355.
356.
357.
358.
359.
360.
361.
362.
363.
364.
365.
366.
367.
368.
369.
370.
371.
372.
373.
374.
375.
376.
377.
378.
379.
380.
381.
382.
383.
384.
385.
386.
387.
388.
389.
390.
391.
392.
393.
394.
395.
396.
397.
398.
399.
400.
401.
402.
403.
404.
405.
406.
407.
408.
409.
410.
411.
412.
413.
414.
415.
416.
417.
418.
419.
420.
421.
422.
423.
424.
425.
426.
427.
428.
429.
430.
431.
432.
433.
434.
435.
436.
437.
438.
439.
440.
441.
442.
443.
444.
445.
446.
447.
448.
449.
450.
451.
452.
453.
454.
455.
456.
457.
458.
459.
460.
461.
462.
463.
464.
465.
466.
467.
468.
469.
470.
471.
472.
473.
474.
475.
476.
477.
478.
479.
480.
481.
482.
483.
484.
485.
486.
487.
488.
489.
490.
491.
492.
493.
494.
495.
496.
497.
498.
499.
500.
501.
502.
503.
504.
505.
506.
507.
508.
509.
510.
511.
512.
513.
514.
515.
516.
517.
518.
519.
520.
521.
522.
523.
524.
525.
526.
527.
528.
529.
530.
531.
532.
533.
534.
535.
536.
537.
538.
539.
540.
541.
542.
543.
544.
545.
546.
547.
548.
549.
550.
551.
552.
553.
554.
555.
556.
557.
558.
559.
560.
561.
562.
563.
564.
565.
566.
567.
568.
569.
570.
571.
572.
573.
574.
575.
576.
577.
578.
579.
580.
581.
582.
583.
584.
585.
586.
587.
588.
589.
590.
591.
592.
593.
594.
595.
596.
CanvasMatrix4.prototype.setXAxis = function(vec)
{
this.m11 = vec.x; this.m12 = vec.y; this.m13 = vec.z;
};
CanvasMatrix4.prototype.setYAxis = function(vec)
{
this.m21 = vec.x; this.m22 = vec.y; this.m23 = vec.z;
};
CanvasMatrix4.prototype.setZAxis = function(vec)
{
this.m31 = vec.x; this.m32 = vec.y; this.m33 = vec.z;
};
CanvasMatrix4.prototype.setWAxis = function(vec)
{
this.m41 = vec.x; this.m42 = vec.y; this.m43 = vec.z;
};
CanvasMatrix4.prototype.translate = function(x,y,z)
{
if (x == undefined)
x = 0;
if (y == undefined)
y = 0;
if (z == undefined)
z = 0;
var matrix = new CanvasMatrix4();
matrix.m41 = x;
matrix.m42 = y;
matrix.m43 = z;
this.multRight(matrix);
};
CanvasMatrix4.prototype.scale = function(x,y,z)
{
if (x == undefined)
x = 1;
if (z == undefined) {
if (y == undefined) {
y = x;
z = x;
}
else
z = 1;
}
else if (y == undefined)
y = x;
var matrix = new CanvasMatrix4();
matrix.m11 = x;
matrix.m22 = y;
matrix.m33 = z;
this.multRight(matrix);
};
CanvasMatrix4.prototype.rotate = function(angle,x,y,z)
{
// angles are in degrees. Switch to radians
angle = angle / 180 * Math.PI;
angle /= 2;
var sinA = Math.sin(angle);
var cosA = Math.cos(angle);
var sinA2 = sinA * sinA;
// normalize
var length = Math.sqrt(x * x + y * y + z * z);
if (length == 0) {
// bad vector, just use something reasonable
x = 0;
y = 0;
z = 1;
} else if (length != 1) {
x /= length;
y /= length;
z /= length;
}
var mat = new CanvasMatrix4();
// optimize case where axis is along major axis
if (x == 1 && y == 0 && z == 0) {
mat.m11 = 1;
mat.m12 = 0;
mat.m13 = 0;
mat.m21 = 0;
mat.m22 = 1 - 2 * sinA2;
mat.m23 = 2 * sinA * cosA;
mat.m31 = 0;
mat.m32 = -2 * sinA * cosA;
mat.m33 = 1 - 2 * sinA2;
mat.m14 = mat.m24 = mat.m34 = 0;
mat.m41 = mat.m42 = mat.m43 = 0;
mat.m44 = 1;
} else if (x == 0 && y == 1 && z == 0) {
mat.m11 = 1 - 2 * sinA2;
mat.m12 = 0;
mat.m13 = -2 * sinA * cosA;
mat.m21 = 0;
mat.m22 = 1;
mat.m23 = 0;
mat.m31 = 2 * sinA * cosA;
mat.m32 = 0;
mat.m33 = 1 - 2 * sinA2;
mat.m14 = mat.m24 = mat.m34 = 0;
mat.m41 = mat.m42 = mat.m43 = 0;
mat.m44 = 1;
} else if (x == 0 && y == 0 && z == 1) {
mat.m11 = 1 - 2 * sinA2;
mat.m12 = 2 * sinA * cosA;
mat.m13 = 0;
mat.m21 = -2 * sinA * cosA;
mat.m22 = 1 - 2 * sinA2;
mat.m23 = 0;
mat.m31 = 0;
mat.m32 = 0;
mat.m33 = 1;
mat.m14 = mat.m24 = mat.m34 = 0;
mat.m41 = mat.m42 = mat.m43 = 0;
mat.m44 = 1;
} else {
var x2 = x*x;
var y2 = y*y;
var z2 = z*z;
mat.m11 = 1 - 2 * (y2 + z2) * sinA2;
mat.m12 = 2 * (x * y * sinA2 + z * sinA * cosA);
mat.m13 = 2 * (x * z * sinA2 - y * sinA * cosA);
mat.m21 = 2 * (y * x * sinA2 - z * sinA * cosA);
mat.m22 = 1 - 2 * (z2 + x2) * sinA2;
mat.m23 = 2 * (y * z * sinA2 + x * sinA * cosA);
mat.m31 = 2 * (z * x * sinA2 + y * sinA * cosA);
mat.m32 = 2 * (z * y * sinA2 - x * sinA * cosA);
mat.m33 = 1 - 2 * (x2 + y2) * sinA2;
mat.m14 = mat.m24 = mat.m34 = 0;
mat.m41 = mat.m42 = mat.m43 = 0;
mat.m44 = 1;
}
this.multRight(mat);
};
CanvasMatrix4.prototype.makeRotationX = function(radians)
{
var sin_angle = Math.sin(radians);
var cos_angle = Math.cos(radians);
this.m11 = 1; this.m21 = 0; this.m31 = 0; this.m41 = 0;
this.m12 = 0; this.m22 = cos_angle; this.m32 = sin_angle; this.m42 = 0;
this.m13 = 0; this.m23 = -sin_angle; this.m33 = cos_angle; this.m43 = 0;
this.m14 = 0; this.m24 = 0; this.m34 = 0; this.m44 = 1;
};
CanvasMatrix4.prototype.makeRotationY = function(radians)
{
var m = new CanvasMatrix4();
var sin_angle = Math.sin(radians);
var cos_angle = Math.cos(radians);
this.m11 = cos_angle; this.m21 = 0; this.m31 = -sin_angle; this.m41 = 0;
this.m12 = 0; this.m22 = 1; this.m32 = 0; this.m42 = 0;
this.m13 = sin_angle; this.m23 = 0; this.m33 = cos_angle; this.m43 = 0;
this.m14 = 0; this.m24 = 0; this.m34 = 0; this.m44 = 1;
};
CanvasMatrix4.prototype.makeRotationZ = function(radians)
{
var m = new CanvasMatrix4();
var sin_angle = Math.sin(radians);
var cos_angle = Math.cos(radians);
this.m11 = cos_angle; this.m21 = sin_angle; this.m31 = 0; this.m41 = 0;
this.m12 = -sin_angle; this.m22 = cos_angle; this.m32 = 0; this.m42 = 0;
this.m13 = 0; this.m23 = 0; this.m33 = 1; this.m43 = 0;
this.m14 = 0; this.m24 = 0; this.m34 = 0; this.m44 = 1;
};
CanvasMatrix4.prototype.multRight = function(mat)
{
var m11 = (this.m11 * mat.m11 + this.m12 * mat.m21
+ this.m13 * mat.m31 + this.m14 * mat.m41);
var m12 = (this.m11 * mat.m12 + this.m12 * mat.m22
+ this.m13 * mat.m32 + this.m14 * mat.m42);
var m13 = (this.m11 * mat.m13 + this.m12 * mat.m23
+ this.m13 * mat.m33 + this.m14 * mat.m43);
var m14 = (this.m11 * mat.m14 + this.m12 * mat.m24
+ this.m13 * mat.m34 + this.m14 * mat.m44);
var m21 = (this.m21 * mat.m11 + this.m22 * mat.m21
+ this.m23 * mat.m31 + this.m24 * mat.m41);
var m22 = (this.m21 * mat.m12 + this.m22 * mat.m22
+ this.m23 * mat.m32 + this.m24 * mat.m42);
var m23 = (this.m21 * mat.m13 + this.m22 * mat.m23
+ this.m23 * mat.m33 + this.m24 * mat.m43);
var m24 = (this.m21 * mat.m14 + this.m22 * mat.m24
+ this.m23 * mat.m34 + this.m24 * mat.m44);
var m31 = (this.m31 * mat.m11 + this.m32 * mat.m21
+ this.m33 * mat.m31 + this.m34 * mat.m41);
var m32 = (this.m31 * mat.m12 + this.m32 * mat.m22
+ this.m33 * mat.m32 + this.m34 * mat.m42);
var m33 = (this.m31 * mat.m13 + this.m32 * mat.m23
+ this.m33 * mat.m33 + this.m34 * mat.m43);
var m34 = (this.m31 * mat.m14 + this.m32 * mat.m24
+ this.m33 * mat.m34 + this.m34 * mat.m44);
var m41 = (this.m41 * mat.m11 + this.m42 * mat.m21
+ this.m43 * mat.m31 + this.m44 * mat.m41);
var m42 = (this.m41 * mat.m12 + this.m42 * mat.m22
+ this.m43 * mat.m32 + this.m44 * mat.m42);
var m43 = (this.m41 * mat.m13 + this.m42 * mat.m23
+ this.m43 * mat.m33 + this.m44 * mat.m43);
var m44 = (this.m41 * mat.m14 + this.m42 * mat.m24
+ this.m43 * mat.m34 + this.m44 * mat.m44);
this.m11 = m11;
this.m12 = m12;
this.m13 = m13;
this.m14 = m14;
this.m21 = m21;
this.m22 = m22;
this.m23 = m23;
this.m24 = m24;
this.m31 = m31;
this.m32 = m32;
this.m33 = m33;
this.m34 = m34;
this.m41 = m41;
this.m42 = m42;
this.m43 = m43;
this.m44 = m44;
};
CanvasMatrix4.prototype.multLeft = function(mat)
{
var m11 = (mat.m11 * this.m11 + mat.m12 * this.m21
+ mat.m13 * this.m31 + mat.m14 * this.m41);
var m12 = (mat.m11 * this.m12 + mat.m12 * this.m22
+ mat.m13 * this.m32 + mat.m14 * this.m42);
var m13 = (mat.m11 * this.m13 + mat.m12 * this.m23
+ mat.m13 * this.m33 + mat.m14 * this.m43);
var m14 = (mat.m11 * this.m14 + mat.m12 * this.m24
+ mat.m13 * this.m34 + mat.m14 * this.m44);
var m21 = (mat.m21 * this.m11 + mat.m22 * this.m21
+ mat.m23 * this.m31 + mat.m24 * this.m41);
var m22 = (mat.m21 * this.m12 + mat.m22 * this.m22
+ mat.m23 * this.m32 + mat.m24 * this.m42);
var m23 = (mat.m21 * this.m13 + mat.m22 * this.m23
+ mat.m23 * this.m33 + mat.m24 * this.m43);
var m24 = (mat.m21 * this.m14 + mat.m22 * this.m24
+ mat.m23 * this.m34 + mat.m24 * this.m44);
var m31 = (mat.m31 * this.m11 + mat.m32 * this.m21
+ mat.m33 * this.m31 + mat.m34 * this.m41);
var m32 = (mat.m31 * this.m12 + mat.m32 * this.m22
+ mat.m33 * this.m32 + mat.m34 * this.m42);
var m33 = (mat.m31 * this.m13 + mat.m32 * this.m23
+ mat.m33 * this.m33 + mat.m34 * this.m43);
var m34 = (mat.m31 * this.m14 + mat.m32 * this.m24
+ mat.m33 * this.m34 + mat.m34 * this.m44);
var m41 = (mat.m41 * this.m11 + mat.m42 * this.m21
+ mat.m43 * this.m31 + mat.m44 * this.m41);
var m42 = (mat.m41 * this.m12 + mat.m42 * this.m22
+ mat.m43 * this.m32 + mat.m44 * this.m42);
var m43 = (mat.m41 * this.m13 + mat.m42 * this.m23
+ mat.m43 * this.m33 + mat.m44 * this.m43);
var m44 = (mat.m41 * this.m14 + mat.m42 * this.m24
+ mat.m43 * this.m34 + mat.m44 * this.m44);
this.m11 = m11;
this.m12 = m12;
this.m13 = m13;
this.m14 = m14;
this.m21 = m21;
this.m22 = m22;
this.m23 = m23;
this.m24 = m24;
this.m31 = m31;
this.m32 = m32;
this.m33 = m33;
this.m34 = m34;
this.m41 = m41;
this.m42 = m42;
this.m43 = m43;
this.m44 = m44;
};
CanvasMatrix4.prototype.ortho = function(left, right, bottom, top, near, far)
{
var tx = (left + right) / (left - right);
var ty = (top + bottom) / (top - bottom);
var tz = (far + near) / (far - near);
var matrix = new CanvasMatrix4();
matrix.m11 = 2 / (left - right);
matrix.m12 = 0;
matrix.m13 = 0;
matrix.m14 = 0;
matrix.m21 = 0;
matrix.m22 = 2 / (top - bottom);
matrix.m23 = 0;
matrix.m24 = 0;
matrix.m31 = 0;
matrix.m32 = 0;
matrix.m33 = -2 / (far - near);
matrix.m34 = 0;
matrix.m41 = tx;
matrix.m42 = ty;
matrix.m43 = tz;
matrix.m44 = 1;
this.multRight(matrix);
};
CanvasMatrix4.prototype.frustum = function(left, right, bottom, top, near, far)
{
var matrix = new CanvasMatrix4();
var A = (right + left) / (right - left);
var B = (top + bottom) / (top - bottom);
var C = -(far + near) / (far - near);
var D = -(2 * far * near) / (far - near);
matrix.m11 = (2 * near) / (right - left);
matrix.m12 = 0;
matrix.m13 = 0;
matrix.m14 = 0;
matrix.m21 = 0;
matrix.m22 = 2 * near / (top - bottom);
matrix.m23 = 0;
matrix.m24 = 0;
matrix.m31 = A;
matrix.m32 = B;
matrix.m33 = C;
matrix.m34 = -1;
matrix.m41 = 0;
matrix.m42 = 0;
matrix.m43 = D;
matrix.m44 = 0;
this.multRight(matrix);
};
CanvasMatrix4.prototype.perspective = function(fovy, aspect, zNear, zFar)
{
var top = Math.tan(fovy * Math.PI / 360) * zNear;
var bottom = -top;
var left = aspect * bottom;
var right = aspect * top;
this.frustum(left, right, bottom, top, zNear, zFar);
};
CanvasMatrix4.prototype.veclookat = function(eye, center, up)
{
this.lookat(eye.x, eye.y, eye.z, center.x, center.y, center.z, up.x, up.y, up.z);
}
CanvasMatrix4.prototype.lookat = function(eyex, eyey, eyez, centerx, centery, centerz, upx, upy, upz)
{
var matrix = new CanvasMatrix4();
// Make rotation matrix
// Z vector
var zx = eyex - centerx;
var zy = eyey - centery;
var zz = eyez - centerz;
var mag = Math.sqrt(zx * zx + zy * zy + zz * zz);
if (mag) {
zx /= mag;
zy /= mag;
zz /= mag;
}
// Y vector
var yx = upx;
var yy = upy;
var yz = upz;
// X vector = Y cross Z
xx = yy * zz - yz * zy;
xy = -yx * zz + yz * zx;
xz = yx * zy - yy * zx;
// Recompute Y = Z cross X
yx = zy * xz - zz * xy;
yy = -zx * xz + zz * xx;
yx = zx * xy - zy * xx;
// cross product gives area of parallelogram, which is < 1.0 for
// non-perpendicular unit-length vectors; so normalize x, y here
mag = Math.sqrt(xx * xx + xy * xy + xz * xz);
if (mag) {
xx /= mag;
xy /= mag;
xz /= mag;
}
mag = Math.sqrt(yx * yx + yy * yy + yz * yz);
if (mag) {
yx /= mag;
yy /= mag;
yz /= mag;
}
matrix.m11 = xx;
matrix.m12 = xy;
matrix.m13 = xz;
matrix.m14 = 0;
matrix.m21 = yx;
matrix.m22 = yy;
matrix.m23 = yz;
matrix.m24 = 0;
matrix.m31 = zx;
matrix.m32 = zy;
matrix.m33 = zz;
matrix.m34 = 0;
matrix.m41 = 0;
matrix.m42 = 0;
matrix.m43 = 0;
matrix.m44 = 1;
matrix.translate(-eyex, -eyey, -eyez);
this.multRight(matrix);
};
// Support functions
CanvasMatrix4.prototype._determinant2x2 = function(a, b, c, d)
{
return a * d - b * c;
};
CanvasMatrix4.prototype._determinant3x3 = function(a1, a2, a3, b1, b2, b3, c1, c2, c3)
{
return a1 * this._determinant2x2(b2, b3, c2, c3)
- b1 * this._determinant2x2(a2, a3, c2, c3)
+ c1 * this._determinant2x2(a2, a3, b2, b3);
};
CanvasMatrix4.prototype._determinant4x4 = function()
{
var a1 = this.m11;
var b1 = this.m12;
var c1 = this.m13;
var d1 = this.m14;
var a2 = this.m21;
var b2 = this.m22;
var c2 = this.m23;
var d2 = this.m24;
var a3 = this.m31;
var b3 = this.m32;
var c3 = this.m33;
var d3 = this.m34;
var a4 = this.m41;
var b4 = this.m42;
var c4 = this.m43;
var d4 = this.m44;
return a1 * this._determinant3x3(b2, b3, b4, c2, c3, c4, d2, d3, d4)
- b1 * this._determinant3x3(a2, a3, a4, c2, c3, c4, d2, d3, d4)
+ c1 * this._determinant3x3(a2, a3, a4, b2, b3, b4, d2, d3, d4)
- d1 * this._determinant3x3(a2, a3, a4, b2, b3, b4, c2, c3, c4);
};
CanvasMatrix4.prototype._makeAdjoint = function()
{
var a1 = this.m11;
var b1 = this.m12;
var c1 = this.m13;
var d1 = this.m14;
var a2 = this.m21;
var b2 = this.m22;
var c2 = this.m23;
var d2 = this.m24;
var a3 = this.m31;
var b3 = this.m32;
var c3 = this.m33;
var d3 = this.m34;
var a4 = this.m41;
var b4 = this.m42;
var c4 = this.m43;
var d4 = this.m44;
// Row column labeling reversed since we transpose rows & columns
this.m11 = this._determinant3x3(b2, b3, b4, c2, c3, c4, d2, d3, d4);
this.m21 = - this._determinant3x3(a2, a3, a4, c2, c3, c4, d2, d3, d4);
this.m31 = this._determinant3x3(a2, a3, a4, b2, b3, b4, d2, d3, d4);
this.m41 = - this._determinant3x3(a2, a3, a4, b2, b3, b4, c2, c3, c4);
this.m12 = - this._determinant3x3(b1, b3, b4, c1, c3, c4, d1, d3, d4);
this.m22 = this._determinant3x3(a1, a3, a4, c1, c3, c4, d1, d3, d4);
this.m32 = - this._determinant3x3(a1, a3, a4, b1, b3, b4, d1, d3, d4);
this.m42 = this._determinant3x3(a1, a3, a4, b1, b3, b4, c1, c3, c4);
this.m13 = this._determinant3x3(b1, b2, b4, c1, c2, c4, d1, d2, d4);
this.m23 = - this._determinant3x3(a1, a2, a4, c1, c2, c4, d1, d2, d4);
this.m33 = this._determinant3x3(a1, a2, a4, b1, b2, b4, d1, d2, d4);
this.m43 = - this._determinant3x3(a1, a2, a4, b1, b2, b4, c1, c2, c4);
this.m14 = - this._determinant3x3(b1, b2, b3, c1, c2, c3, d1, d2, d3);
this.m24 = this._determinant3x3(a1, a2, a3, c1, c2, c3, d1, d2, d3);
this.m34 = - this._determinant3x3(a1, a2, a3, b1, b2, b3, d1, d2, d3);
this.m44 = this._determinant3x3(a1, a2, a3, b1, b2, b3, c1, c2, c3);
};
CanvasMatrix4.prototype.vectorMultLeft = function(_vec4)
{
out = new vec4(0,0,0,0);
out.x = _vec4.x*this.m11 + _vec4.y*this.m21 + _vec4.z*this.m31 + _vec4.w*this.m41;
out.y = _vec4.x*this.m12 + _vec4.y*this.m22 + _vec4.z*this.m32 + _vec4.w*this.m42;
out.z = _vec4.x*this.m13 + _vec4.y*this.m23 + _vec4.z*this.m33 + _vec4.w*this.m43;
out.w = _vec4.x*this.m14 + _vec4.y*this.m24 + _vec4.z*this.m34 + _vec4.w*this.m44;
return out;
};
CanvasMatrix4.prototype.vectorMultRight = function(_vec4)
{
out = new vec4(0,0,0,0);
out.x = _vec4.x*this.m11 + _vec4.y*this.m12 + _vec4.z*this.m13 + _vec4.w*this.m14;
out.y = _vec4.x*this.m21 + _vec4.y*this.m22 + _vec4.z*this.m23 + _vec4.w*this.m24;
out.z = _vec4.x*this.m31 + _vec4.y*this.m32 + _vec4.z*this.m33 + _vec4.w*this.m34;
out.w = _vec4.x*this.m41 + _vec4.y*this.m42 + _vec4.z*this.m43 + _vec4.w*this.m44;
return out;
};
// helper functions (static functions)
function createRotationX(radians)
{
var m = new CanvasMatrix4();
var sin_angle = Math.sin(radians);
var cos_angle = Math.cos(radians);
m.m11 = 1; m.m21 = 0; m.m31 = 0; m.m41 = 0;
m.m12 = 0; m.m22 = cos_angle; m.m32 = sin_angle; m.m42 = 0;
m.m13 = 0; m.m23 = -sin_angle; m.m33 = cos_angle; m.m43 = 0;
m.m14 = 0; m.m24 = 0; m.m34 = 0; m.m44 = 1;
return m;
};
function createRotationY(radians)
{
var m = new CanvasMatrix4();
var sin_angle = Math.sin(radians);
var cos_angle = Math.cos(radians);
m.m11 = cos_angle; m.m21 = 0; m.m31 = -sin_angle; m.m41 = 0;
m.m12 = 0; m.m22 = 1; m.m32 = 0; m.m42 = 0;
m.m13 = sin_angle; m.m23 = 0; m.m33 = cos_angle; m.m43 = 0;
m.m14 = 0; m.m24 = 0; m.m34 = 0; m.m44 = 1;
return m;
};
function createRotationZ(radians)
{
var m = new CanvasMatrix4();
var sin_angle = Math.sin(radians);
var cos_angle = Math.cos(radians);
m.m11 = cos_angle; m.m21 = sin_angle; m.m31 = 0; m.m41 = 0;
m.m12 = -sin_angle; m.m22 = cos_angle; m.m32 = 0; m.m42 = 0;
m.m13 = 0; m.m23 = 0; m.m33 = 1; m.m43 = 0;
m.m14 = 0; m.m24 = 0; m.m34 = 0; m.m44 = 1;
return m;
};
controls.js
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.
49.
50.
51.
52.
53.
54.
55.
56.
57.
58.
59.
60.
61.
62.
63.
64.
65.
66.
67.
68.
69.
70.
71.
72.
73.
74.
75.
76.
77.
78.
79.
80.
81.
82.
83.
84.
85.
86.
87.
88.
89.
90.
91.
92.
93.
94.
95.
96.
97.
98.
99.
100.
101.
102.
103.
104.
105.
106.
107.
108.
109.
110.
111.
112.
113.
114.
115.
116.
117.
118.
119.
120.
121.
122.
123.
124.
125.
126.
127.
128.
129.
130.
131.
132.
133.
134.
135.
136.
137.
138.
139.
140.
141.
142.
143.
144.
145.
146.
147.
148.
149.
150.
151.
152.
153.
154.
155.
156.
157.
158.
159.
160.
161.
162.
163.
164.
165.
var
gl,
canvas,
pi180 = 180/Math.PI,
transl = -3,
rTouch,
fiTouch,
idTouch0,
xRot = yRot = zRot = xOffs = yOffs = drag = 0;
function startTouch(evt) {
var evList = evt.touches;
if(evList.length == 1){
xOffs = evList[0].pageX; yOffs = evList[0].pageY;
drag = 1;}
else if(evList.length == 2){
idTouch0 = evList[0].identifier;
var dx = evList[1].pageX - evList[0].pageX;
var dy = evList[1].pageY - evList[0].pageY;
rTouch = Math.sqrt(dx*dx + dy*dy);
fiTouch = Math.atan2(dy, dx);
drag = 2;}
evt.preventDefault();
}
function continueTouch(evt) {
if(drag == 1){
var x = evt.touches[0].pageX, y = evt.touches[0].pageY;
yRot = x - xOffs; xRot = y - yOffs;
xOffs = x; yOffs = y;
drawScene();}
else if(drag == 2){
var dx = evt.touches[1].pageX - evt.touches[0].pageX;
var dy = evt.touches[1].pageY - evt.touches[0].pageY;
var r = Math.sqrt(dx*dx + dy*dy);
var fi;
if( idTouch0 == evt.touches[0].identifier ) fi = Math.atan2(dy, dx);
else fi = Math.atan2(-dy, -dx);
transl *= rTouch / r;
zRot = pi180*(fiTouch - fi);
rTouch = r; fiTouch = fi;
drawScene();
}
}
function stopTouch() {
drag = 0;
}
function mymousedown( ev ){
drag = 1;
xOffs = ev.clientX; yOffs = ev.clientY;
}
function mymouseup( ev ){
drag = 0;
}
function mymousemove( ev ){
if ( drag == 0 ) return;
if ( ev.shiftKey ) {
transl *= 1 + (ev.clientY - yOffs)/1000;
zRot = (xOffs - ev.clientX)*.3; }
else {
yRot = - xOffs + ev.clientX; xRot = - yOffs + ev.clientY; }
xOffs = ev.clientX; yOffs = ev.clientY;
drawScene();
}
function wheelHandler(ev) {
var del = 1.1;
if (ev.shiftKey) del = 1.01;
var ds = ((ev.detail || ev.wheelDelta) > 0) ? del : (1 / del);
transl *= ds;
drawScene();
ev.preventDefault();
}
function getShader ( gl, id ){
var shaderScript = document.getElementById ( id );
var str = "";
var k = shaderScript.firstChild;
while ( k ){
if ( k.nodeType == 3 ) str += k.textContent;
k = k.nextSibling;
}
var shader;
if ( shaderScript.type == "x-shader/x-fragment" )
shader = gl.createShader ( gl.FRAGMENT_SHADER );
else if ( shaderScript.type == "x-shader/x-vertex" )
shader = gl.createShader(gl.VERTEX_SHADER);
else return null;
gl.shaderSource(shader, str);
gl.compileShader(shader);
if (gl.getShaderParameter(shader, gl.COMPILE_STATUS) == 0)
alert(id + "\n" + gl.getShaderInfoLog(shader));
return shader;
}
function initGL(){
canvas = document.getElementById("canvas");
if (!window.WebGLRenderingContext){
alert("Извините, но Ваш браузер не поддерживает технологию webGL");
return;}
try {
//webgl
// gl = canvas.getContext("experimental-webgl");
var names = [
"webgl",
"experimental-webgl",
"webkit-3d",
"moz-webgl"
];
for(var i=0; i<names.length; ++i){
try{
gl = canvas.getContext(names[i],{ antialias: true, stencil: true });
}catch(e) {}
if (gl) break;
}
} catch(e) {}
if ( !gl ) {alert("Can't get WebGL"); return;}
canvas.addEventListener('DOMMouseScroll', wheelHandler, false);
canvas.addEventListener('mousewheel', wheelHandler, false);
canvas.addEventListener('mousedown', mymousedown, false);
canvas.addEventListener('mouseup', mymouseup, false);
canvas.addEventListener('mousemove', mymousemove, false);
canvas.addEventListener('touchstart', startTouch, false);
canvas.addEventListener('touchmove', continueTouch, false);
canvas.addEventListener('touchend', stopTouch, false);
}
|
