https://sg.hu/galeria/1541098928/15410989281541099029.png
https://sg.hu/galeria/1541098928/15410989281541099005.png
<!doctype html>
<html>
<body>
<canvas width = "660" height = "650" id = "my_Canvas"></canvas>
<script>
/*============= Creating a canvas ======================*/
var canvas = document.getElementById('my_Canvas');
gl = canvas.getContext('experimental-webgl');
/*========== Defining and storing the geometry ==========*/
var r=1.5,pi=3.1415926,Nx=21,Ny=21;
var vertices=new Array(Nx*Ny*3),i=0,j=0;
var colors=new Array(Nx*Ny*3);
var normals=new Array(Nx*Ny*3);
var indices=new Array((Nx-1)*(Ny-1)*3*2);
for(y=0;y<Ny;y++)
for(x=0;x<Nx;x++)
{
vertices[i]=x; i++;
vertices[i]=y; i++;
vertices[i]=0; i++;
colors[j]=x/Nx; j++;
colors[j]=y/Ny; j++;
colors[j]=0; j++;
}
j=0;
for(y=0;y<Ny;y++)
for(x=0;x<Nx;x++)
{
normals[j]=vertices[j]; j++ // /t
normals[j]=vertices[j]; j++
normals[j]=vertices[j]; j++
}
i=0;
for(y=0;y<Ny-1;y++)
for(x=0;x<Nx-1;x++)
{
indices[i]=y*Nx+x; i++;
indices[i]=y*Nx+x+1; i++;
indices[i]=(y+1)*Nx+x+1; i++;
indices[i]=y*Nx+x; i++;
indices[i]=(y+1)*Nx+x+1; i++;
indices[i]=(y+1)*Nx+x; i++;
}
// Create and store data into vertex buffer
var vertex_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
// Create and store data into color buffer
var color_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
var norm_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ARRAY_BUFFER, norm_buffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(normals), gl.STATIC_DRAW);
// Create and store data into index buffer
var index_buffer = gl.createBuffer ();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
/*=================== SHADERS =================== */
var vertCode = 'attribute vec3 position;'+
'uniform mat4 Pmatrix;'+
'uniform mat4 Vmatrix;'+
'uniform mat4 Mmatrix;'+
'uniform float Mtime2;'+
'uniform vec3 pos2;'+
'attribute vec3 color;'+//the color of the point
'attribute vec3 normal;'+
'varying vec3 vColor;'+
'vec2 qmul(vec2 a,vec2 b) '+
'{'+
' vec2 e;'+
' e.x=a.x*b.x - a.y*b.y;'+
' e.y=a.y*b.x + a.x*b.y;'+
' return e;'+
'}'+
'vec2 qexp(float a) '+
'{'+
' vec2 e;'+
' e.x=cos(a);'+
' e.y=sin(a);'+
' return e;'+
'}'+
'float qcosh(float z) {float ee=2.718281828;return (pow(ee,z)+pow(ee,-z))/2.0;}'+
'float qsinh(float z) {float ee=2.718281828;return (pow(ee,z)-pow(ee,-z))/2.0;}'+
'vec2 qsinh(vec2 v)'+
'{'+
' return vec2(qsinh(v.x) * cos(v.y), qcosh(v.x) * sin(v.y));'+
'}'+
'vec2 qcosh(vec2 v)'+
'{'+
' return vec2(qcosh(v.x) * cos(v.y), qsinh(v.x) * sin(v.y));'+
'}'+
'vec2 qpow(vec2 v,vec2 p)'+
'{'+
' float ee=2.718281828;'+
' float rho = sqrt(v.x*v.x + v.y*v.y);'+
' v.x+=0.00001;'+
' v.y+=0.00001;'+
' float theta = atan(v.y/ v.x);'+ //atan2
' if(v.x<0.0) theta+=3.1415926535;'+
' float newRho = p.x * theta + p.y * log(rho);'+
' float t = pow(rho, p.x) * pow(ee, -p.y * theta);'+
' return vec2(t * cos(newRho), t * sin(newRho));'+
'}'+
'vec3 calabiYau(vec3 xy,vec3 k12) {'+
' float pi=3.1415926535;'+
' vec2 z11,z1,z2;'+
' float k1,k2,dx=20.0,alf=(0.75)*pi,q=2.0/k12.z;'+//0.1*Mtime2+ k12.z==n !
' z11.x=mix(-1.0,1.0,(xy.x/dx));'+
' z11.y=mix(0.0,0.5*pi,(xy.y/dx));'+
' k1=k12.x*pi*q;'+
' k2=k12.y*pi*q;'+
' z1=qmul(qexp(k1),qpow(qcosh(z11),vec2(q,0.0)));'+
' z2=qmul(qexp(k2),qpow(qsinh(z11),vec2(q,0.0)));'+
' return vec3(z1.x, z2.x, cos(alf)*z1.y +sin(alf)*z2.y)*1.7;'+
'}'+
'void main(void) { '+//pre-built function
'vec3 v1=calabiYau(position,pos2);'+
'vec3 v2=calabiYau(position+vec3(1.0,0.0,0.0),pos2);'+
'vec3 v3=calabiYau(position+vec3(0.0,1.0,0.0),pos2);'+
'vec3 norm=normalize(cross(v3-v1,v2-v1));'+
'gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(v1, 1.);'+
'vec4 v4 = Mmatrix*vec4(v1, 1.);'+
'vec4 norm4 = Mmatrix*vec4(norm, 0.);'+
'vec3 v5 = v4.xyz;'+
'vec3 norm3 = normalize(norm4.xyz);'+
'vec3 light1=vec3(5.0,-5.5,2.5);'+
'vec3 light2=vec3(-5.5,-15.5,-2.0);'+
'float ligv=clamp(clamp(dot(normalize(light1),norm3),0.0,1.0)*clamp(dot(normalize(light2),norm3),0.0,1.0)+0.2 ,0.0,1.0);'+
'vColor = vec3(1.0,0.0,0.0)*ligv;'+
// 'vColor = color*ligv;'+
'vec3 w1=normalize(v5-vec3(0.0,0.0,-10.0));'+
'vec3 ref=normalize(w1-norm3*2.0*dot(norm3,w1));'+
'vec3 w2=normalize(light1-v5);'+
'float spec=pow(clamp(dot(ref,w2),0.0,1.0),15.0);'+
'vColor += vec3(1.0,1.0,0.0)*spec;'+
'w2=normalize(light2-v5);'+
'spec=pow(clamp(dot(ref,w2),0.0,1.0),15.0);'+
'vColor += vec3(0.0,0.5,1.0)*spec;'+
'vColor = clamp(vColor,0.0,1.0);'+
'}';
// e.real = this->real*c.real - this->img*c.img;
// e.img = this->img*c.real + this->real*c.img;
var fragCode = 'precision mediump float;'+
'varying vec3 vColor;'+
'void main(void) {'+
'gl_FragColor = vec4(vColor, 1.);'+
'}';
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
var shaderprogram = gl.createProgram();
gl.attachShader(shaderprogram, vertShader);
gl.attachShader(shaderprogram, fragShader);
gl.linkProgram(shaderprogram);
/*======== Associating attributes to vertex shader =====*/
var _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix");
var _Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix");
var _Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
var _Mtime2 = gl.getUniformLocation(shaderprogram, "Mtime2");
var _Mpos2 = gl.getUniformLocation(shaderprogram, "pos2");
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
var _position = gl.getAttribLocation(shaderprogram, "position");
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
gl.enableVertexAttribArray(_position);
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
var _color = gl.getAttribLocation(shaderprogram, "color");
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_color);
gl.bindBuffer(gl.ARRAY_BUFFER, norm_buffer);
var _norm = gl.getAttribLocation(shaderprogram, "normal");
gl.vertexAttribPointer(_norm, 3, gl.FLOAT, false,0,0) ;
gl.enableVertexAttribArray(_norm);
gl.useProgram(shaderprogram);
/*==================== MATRIX ====================== */
function get_projection(angle, a, zMin, zMax) {
var ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
return [
0.5/ang, 0 , 0, 0,
0, 0.5*a/ang, 0, 0,
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
];
}
var proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100);
var mo_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
var view_matrix = [ 1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1 ];
view_matrix[14] = view_matrix[14]-6;
/*================= Mouse events ======================*/
var AMORTIZATION = 0.95;
var drag = false;
var old_x, old_y;
var dX = 0, dY = 0;
var mouseDown = function(e) {
drag = true;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
return false;
};
var mouseUp = function(e){
drag = false;
};
var mouseMove = function(e) {
if (!drag) return false;
dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
THETA+= dX;
PHI+=dY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
};
canvas.addEventListener("mousedown", mouseDown, false);
canvas.addEventListener("mouseup", mouseUp, false);
canvas.addEventListener("mouseout", mouseUp, false);
canvas.addEventListener("mousemove", mouseMove, false);
/*=========================rotation================*/
function rotateX(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv1 = m[1], mv5 = m[5], mv9 = m[9];
m[1] = m[1]*c-m[2]*s;
m[5] = m[5]*c-m[6]*s;
m[9] = m[9]*c-m[10]*s;
m[2] = m[2]*c+mv1*s;
m[6] = m[6]*c+mv5*s;
m[10] = m[10]*c+mv9*s;
}
function rotateY(m, angle) {
var c = Math.cos(angle);
var s = Math.sin(angle);
var mv0 = m[0], mv4 = m[4], mv8 = m[8];
m[0] = c*m[0]+s*m[2];
m[4] = c*m[4]+s*m[6];
m[8] = c*m[8]+s*m[10];
m[2] = c*m[2]-s*mv0;
m[6] = c*m[6]-s*mv4;
m[10] = c*m[10]-s*mv8;
}
/*=================== Drawing =================== */
var THETA = 0,
PHI = 0;
var time_old = 0;
var animate = function(time) {
var dt = time-time_old;
if (!drag) {
dX *= AMORTIZATION, dY*=AMORTIZATION;
THETA+=dX, PHI+=dY;
}
//set model matrix to I4
mo_matrix[0] = 1, mo_matrix[1] = 0, mo_matrix[2] = 0,
mo_matrix[3] = 0,
mo_matrix[4] = 0, mo_matrix[5] = 1, mo_matrix[6] = 0,
mo_matrix[7] = 0,
mo_matrix[8] = 0, mo_matrix[9] = 0, mo_matrix[10] = 1,
mo_matrix[11] = 0,
mo_matrix[12] = 0, mo_matrix[13] = 0, mo_matrix[14] = 0,
mo_matrix[15] = 1;
rotateY(mo_matrix, THETA);
rotateX(mo_matrix, PHI);
time_old = time;
gl.enable(gl.DEPTH_TEST);
// gl.depthFunc(gl.LEQUAL);
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0);
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
gl.uniformMatrix4fv(_Mmatrix, false, mo_matrix);
gl.uniform1f(_Mtime2, time*1e-3);
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
var n=5;
for(k2=0;k2<n;k2+=1)
for(k1=0;k1<n;k1+=1)
{
gl.uniform3f(_Mpos2, k1,k2,n);
gl.drawElements(gl.TRIANGLES, indices.length, gl.UNSIGNED_SHORT, 0);
}
window.requestAnimationFrame(animate);
}
animate(0);
</script>
</body>
</html>