From 74f7343e14addefc74446c19018b3f82ad961207 Mon Sep 17 00:00:00 2001 From: Syndamia Date: Thu, 9 Feb 2023 10:58:45 +0200 Subject: [WGL/P] Added initial setup --- .../Project/Project.html | 89 + .../Project/shaders.js | 40 + .../Project/webgl-fmi.js | 1979 ++++++++++++++++++++ 3 files changed, 2108 insertions(+) create mode 100644 Year 2/Computer Graphics with WebGL/Project/Project.html create mode 100644 Year 2/Computer Graphics with WebGL/Project/shaders.js create mode 100644 Year 2/Computer Graphics with WebGL/Project/webgl-fmi.js diff --git a/Year 2/Computer Graphics with WebGL/Project/Project.html b/Year 2/Computer Graphics with WebGL/Project/Project.html new file mode 100644 index 0000000..a9e1d66 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Project/Project.html @@ -0,0 +1,89 @@ + + + + + Черната дупка + + + + + + + + + + + + diff --git a/Year 2/Computer Graphics with WebGL/Project/shaders.js b/Year 2/Computer Graphics with WebGL/Project/shaders.js new file mode 100644 index 0000000..d936756 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Project/shaders.js @@ -0,0 +1,40 @@ +var vShader =` + uniform mat4 uProjectionMatrix; + uniform mat4 uViewMatrix; + uniform mat4 uModelMatrix; + uniform mat4 uNormalMatrix; + uniform bool uUseNormalMatrix; + + uniform vec3 uAmbientColor; + uniform vec3 uDiffuseColor; + + uniform vec3 uLightDir; + + attribute vec3 aXYZ; + attribute vec3 aColor; + attribute vec3 aNormal; + + varying vec3 vColor; + + void main () + { + mat4 mvMatrix = uViewMatrix * uModelMatrix; + gl_Position = uProjectionMatrix * mvMatrix * vec4(aXYZ,1); + mat4 nMatrix = uUseNormalMatrix?uNormalMatrix:mvMatrix; + + vColor = uAmbientColor*aColor; + + vec3 light = normalize(-uLightDir); + vec3 normal = vec3(normalize(nMatrix*vec4(aNormal,0))); + vColor += aColor*uDiffuseColor*max(dot(normal,light),0.0); + } +`; + +var fShader = ` + precision mediump float; + varying vec3 vColor; + void main() + { + gl_FragColor = vec4(vColor,1); + } +`; diff --git a/Year 2/Computer Graphics with WebGL/Project/webgl-fmi.js b/Year 2/Computer Graphics with WebGL/Project/webgl-fmi.js new file mode 100644 index 0000000..dbe65b7 --- /dev/null +++ b/Year 2/Computer Graphics with WebGL/Project/webgl-fmi.js @@ -0,0 +1,1979 @@ +// Библиотека WebGL-FMI v0.22.11 +// +// Работа с контексти и шейдъри +// getContext(id) +// getShader(id,type) +// getProgram(idv,idf) +// getVariables() +// +// Математически и помощни функции и константи +// random(a,b) +// radians(degrees) +// sin(a) +// cos(a) +// PI +// custom(obj,props) +// +// Работа с текстури +// loadTexture(url,post) +// texIdentity() +// texTranslate(m,v) +// texScale(m,v) +// texRotate(m,a) +// +// Работа с вектори и матрици +// unitVector(x) +// vectorProduct(x,y) +// scalarProduct(x,y) +// vectorPoints(x,y) +// multiplyMatrix(a,b) +// calculateNormalMatrix(a) +// +// Трансформации с матрици +// unitMatrix(); +// translateMatrix(v) +// scaleMatrix(v) +// xRotateMatrix(a) +// yRotateMatrix(a) +// zRotateMatrix(a) +// rotateMatrix(a,v) +// +// Трансформации със съставни матрици +// identity() +// translate(v) +// scale(v) +// xRotate(a) +// yRotate(a) +// zRotate(a) +// useMatrix() +// pushMatrix() +// popMatrix() +// cloneMatrix() +// +// Проектиране с матрици +// viewMatrix (eye, focus, up) +// orthoMatrix(width, height, near, far) +// perspMatrix(angle, aspect, near, far) +// lookAt(eye, focus, up) +// perspective(angle, aspect, near, far) +// +// Графични обекти (класове) +// Cube(center,size) <- textured +// Cuboid(center,size) <- textured +// Pyramid(center,size,height,n) +// Cone(center,size,height) +// Conoid(center,size,ratio) +// Prism(center,size,height,n) +// Cylinder(center,size,height) <- textured +// Sphere(center,size) <- textured +// Spheroid(center,size) +// Icosahedron(center,size) +// GeodesicSphere(center,size) +// RotationalSolid(center,size,f) +// Torus(center,size,R,r) <- textured +// +// Константи +// CONE_SIDES = 32; +// CYLINDER_SIDES = 32; +// SPHERE_SIDES = 32; +// GEODESIC_SIDES = 3; +// TORUS_MAJOR_SIDES = 50; +// TORUS_MINOR_SIDES = 25; + + + +var gl; // глобален WebGL контекст +var glprog; // глобална GLSL програма +var glmat; // глобална матрица на модела +var glmatnew; // true, ако матрицата е променена, но не е подадена на шейдъра +var glvmat; // глобална матрица на гледната точка +var glstack = []; // стек от матрици на модела + + +// брой байтове в един WebGL FLOAT (трябва да са 4 байта) +var FLOATS = Float32Array.BYTES_PER_ELEMENT; + + +// връща WebGL контекст, свързан с HTML елемент с даден id +function getContext(id) +{ + var canvas = document.getElementById(id); + if (!canvas) + { + alert("Искаме canvas с id=\""+id+"\", а няма!"); + return null; + } + + var context = canvas.getContext("webgl"); + if (!context) + { + context = canvas.getContext("experimental-webgl"); + } + + if (!context) + { + alert("Искаме WebGL контекст, а няма!"); + } + + return context; +} + + +// връща компилиран шейдър +function getShader(id,type) +{ + var elem = document.getElementById(id); + var source = elem?elem.text:id; + var shader = gl.createShader(type); + + gl.shaderSource(shader,source); + gl.compileShader(shader); + if (!gl.getShaderParameter(shader,gl.COMPILE_STATUS)) + { + alert(gl.getShaderInfoLog(shader)); + return null; + } + + return shader; +} + + +// връща готова програма +function getProgram(idv,idf) +{ + var vShader = getShader(idv,gl.VERTEX_SHADER); + var fShader = getShader(idf,gl.FRAGMENT_SHADER); + + if (!vShader || !fShader) {return null;} + + var shaderProgram = gl.createProgram(); + gl.attachShader(shaderProgram,vShader); + gl.attachShader(shaderProgram,fShader); + gl.linkProgram(shaderProgram); + + if (!gl.getProgramParameter(shaderProgram,gl.LINK_STATUS)) + { + alert(gl.getProgramInfoLog(shaderProgram)); + return null; + } + + gl.useProgram(shaderProgram); + return shaderProgram; +} + + +// намира адресите на всички глобални и атрибутни променливи +function getVariables() +{ + for (var i=0; i