From 41f9f7cd075149618223592b36240ef33bc5286e Mon Sep 17 00:00:00 2001 From: tbh12001 Date: Mon, 20 Nov 2017 18:59:24 -0500 Subject: [PATCH 1/2] Three.js actual render stuff. --- js/mobius.js | 30 ++++++++++++++++++++---------- js/render.js | 26 ++++++++++++++++++++------ mobius.html | 1 + 3 files changed, 41 insertions(+), 16 deletions(-) diff --git a/js/mobius.js b/js/mobius.js index 8bb6783..4c7d7bd 100644 --- a/js/mobius.js +++ b/js/mobius.js @@ -1,16 +1,16 @@ function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { - var container = document.createElement('div'); + var container = document.createElement('div'); //Create the slider container container.className ="slider-container"; parent.append(container); - var slider = document.createElement('div'); + var slider = document.createElement('div'); //Create the actual slider handle slider.className = "sliderHandle"; $(slider).draggable({ - containment: "parent", - drag: function(event, ui){ + containment: "parent", //Constrain its motion to the parent + drag: function(event, ui){ //When it's dragged, call this function variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y)); - console.log(variable); + //Add drawing update function here when added } }); container.append(slider); @@ -41,8 +41,13 @@ var Complex = function(_re,_im){ } } var mobius = function(a,b,c,d,z){ - return d.add(c.multiply(z)).reciprocal().multiply(b.add(a.multiply(z))) + return d.add(c.multiply(z)).reciprocal().multiply(b.add(a.multiply(z))); } + +var mobius_inv = function(a,b,c,d,z){ + return c.multiply(Complex(-1,0)).multiply(z).add(a).reciprocal().multiply(b.multiply(Complex(-1,0)).add(z.multiply(d))); +} + remap = function(x,a,b,c,d){ //maps x from [a,b] to [c,d] return (x - a) * (d - c) / (b - a) + c; @@ -56,8 +61,13 @@ var c = new Complex(0,0); var d = new Complex(0,0); $(function () {//document is ready, setup everything - add_2d_ctrl($('body'),a,"a",-1,1,-1,1); - add_2d_ctrl($('body'),b,"b",-1,1,-1,1); - add_2d_ctrl($('body'),c,"c",-1,1,-1,1); - add_2d_ctrl($('body'),d,"d",-1,1,-1,1); + //Create GUI div + guibox = document.createElement('div'); + guibox.id = "gui-box" + document.body.appendChild(guibox); + + add_2d_ctrl($(guibox),a,"a",-1,1,-1,1); + add_2d_ctrl($(guibox),b,"b",-1,1,-1,1); + add_2d_ctrl($(guibox),c,"c",-1,1,-1,1); + add_2d_ctrl($(guibox),d,"d",-1,1,-1,1); }); diff --git a/js/render.js b/js/render.js index 1c17793..a6e32ec 100644 --- a/js/render.js +++ b/js/render.js @@ -5,17 +5,31 @@ var renderer = new THREE.WebGLRenderer(); renderer.setSize( window.innerWidth, window.innerHeight ); document.body.appendChild( renderer.domElement ); -var geometry = new THREE.PlaneGeometry( 1, 1, 1 ); -var material = new THREE.MeshBasicMaterial( { color: 0x00ff00 } ); -var cube = new THREE.Mesh( geometry, material ); -scene.add( cube ); +var geometry = new THREE.PlaneGeometry( 1, 1, 50, 50 ); +var material = new THREE.MeshPhongMaterial( { color: 0x008800,side: THREE.DoubleSide } ); +var plane = new THREE.Mesh( geometry, material ); + +var wireframe = new THREE.WireframeGeometry( geometry ); +var line = new THREE.LineSegments( wireframe ); +// line.material.depthTest = false; +line.material.opacity = 1; +line.material.transparent = true; + +scene.add(line); +scene.add( plane ); + +var directionalLight = new THREE.DirectionalLight( 0xffffff, 1 ); +scene.add( directionalLight ); + camera.position.z = 5; +var frame = 0; function animate() { + frame += 1; requestAnimationFrame( animate ); - cube.rotation.x += 0.1; - cube.rotation.y += 0.1; + geometry.vertices[0].z = Math.sin(frame/100.0); + geometry.verticesNeedUpdate = true; renderer.render( scene, camera ); } animate(); \ No newline at end of file diff --git a/mobius.html b/mobius.html index 5a8dc00..1272009 100644 --- a/mobius.html +++ b/mobius.html @@ -9,6 +9,7 @@ + From 198afe743d3118cbfb671ab9d0d6d0720e8530ab Mon Sep 17 00:00:00 2001 From: tbh12001 Date: Mon, 20 Nov 2017 19:01:08 -0500 Subject: [PATCH 2/2] forgot ui.js in last commit. Added test fragshader, not yet implemented --- js/fragshader.glsl | 32 ++++++++++++++++++++++++++++++++ js/ui.js | 21 +++++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 js/fragshader.glsl create mode 100644 js/ui.js diff --git a/js/fragshader.glsl b/js/fragshader.glsl new file mode 100644 index 0000000..41bb128 --- /dev/null +++ b/js/fragshader.glsl @@ -0,0 +1,32 @@ + +vec2 invMobius(vec2 a, vec2 b, vec2 c, vec2 d, vec2 z){ + vec2 num = vec2(0,0); + num.x = (d.x*z.x - d.y*z.y)-b.x; + num.y = (d.x*z.y - d.y*z.x)-b.y; + + vec2 den; + den.x = (c.x*z.x - c.y*z.y) + a.x; + den.y = -(c.x*z.y + c.y*z.x) + a.y; + + den= den/(den.x*den.x + den.y*den.y); + + vec2 result; + result.x = num.x*den.x - num.y*den.y; + result.y = num.x*den.y + num.y*den.x; + return result; + +} + + +void mainImage( out vec4 fragColor, in vec2 fragCoord ) +{ + vec2 uv = fragCoord.xy / iResolution.xy; + uv = uv- vec2(0.5,0.5); + uv = uv*3.0; + vec2 a = vec2(1,1); + vec2 b = vec2(0,1); + vec2 c = vec2(0,1); + vec2 d = vec2(1,0); + vec2 transCoord = invMobius(a,b,c,d,uv); + fragColor = length(transCoord)>1.0?vec4(1,1,1,1):texture(iChannel0,transCoord); +} diff --git a/js/ui.js b/js/ui.js new file mode 100644 index 0000000..8c6769f --- /dev/null +++ b/js/ui.js @@ -0,0 +1,21 @@ +function add_2d_ctrl(parent,variable,label,min_x,max_x,min_y,max_y) { + var container = document.createElement('div'); //Create the slider container + container.className ="slider-container"; + parent.append(container); + + var slider = document.createElement('div'); //Create the actual slider handle + slider.className = "sliderHandle"; + $(slider).draggable({ + containment: "parent", //Constrain its motion to the parent + drag: function(event, ui){ //When it's dragged, call this function + variable.setVals(remap(ui.position.left,0,80,min_x,max_x),remap(ui.position.top,0,80,min_y,max_y)); + //Add drawing update function here when added + } + }); + container.append(slider); + + var caption = document.createElement('p'); + caption.className = "slider-caption"; + $(caption).text(label); + container.append(caption); +} \ No newline at end of file