Skip to content

Commit

Permalink
setup some things I ended up not using
Browse files Browse the repository at this point in the history
  • Loading branch information
Eric Rowell authored and Eric Rowell committed Apr 15, 2019
1 parent e3f0583 commit 90e997b
Show file tree
Hide file tree
Showing 5 changed files with 48 additions and 36 deletions.
40 changes: 23 additions & 17 deletions engine/dist/ElGrapho.js
Original file line number Diff line number Diff line change
Expand Up @@ -476,26 +476,24 @@ module.exports = `#version 300 es
//https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
//#extension GL_OES_standard_derivatives : enable

//https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
// https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
// https://www.desultoryquest.com/blog/downloads/code/points.js
precision mediump float;
in vec4 vVertexColor;
out vec4 fragColor;

void main(void) {
float r = 0.0, delta = 0.0, alpha = 1.0;
vec2 cxy = 2.0 * gl_PointCoord - 1.0;

r = dot(cxy, cxy);

if (r > 1.0) {
discard;
}

// r = dot(cxy, cxy);
// delta = fwidth(r);
// alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
// if (r > 1.0) {
// discard;
// }




Expand Down Expand Up @@ -2071,11 +2069,9 @@ let WebGL = function(config) {
let gl = layer.scene.context;
let hitGl = layer.hit.context;

gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.enable(gl.DEPTH_TEST);
//gl.getExtension('OES_standard_derivatives');
//gl.enable(gl.BLEND);

hitGl.clearColor(1.0, 1.0, 1.0, 1.0);
hitGl.enable(hitGl.DEPTH_TEST);
};

Expand Down Expand Up @@ -2334,9 +2330,14 @@ WebGL.prototype = {
drawScene: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize, focusedGroup, hoverNode) {
let layer = this.layer;
let gl = layer.scene.context;




let modelViewMatrix = mat4.create();
let projectionMatrix = mat4.create();


// const fieldOfView = 45 * Math.PI / 180; // in radians
// const aspect = layer.width / layer.height;
// const zNear = 0.01;
Expand All @@ -2350,29 +2351,33 @@ WebGL.prototype = {
let far = 11.0;

gl.viewport(0, 0, layer.width*Concrete.PIXEL_RATIO, layer.height*Concrete.PIXEL_RATIO);

gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // To disable the background color of the canvas element
mat4.ortho(projectionMatrix, left, right, bottom, top, near, far);
mat4.translate(modelViewMatrix, modelViewMatrix, [panX, panY, 0]);
mat4.scale(modelViewMatrix, modelViewMatrix, [zoomX, zoomY, 1]);

//console.log(modelViewMatrix);

// each draw instruction is layered beneath current bitmap, so have to do them in reverse
if (this.buffers.points) {
this.drawScenePoints(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
this.drawScenePointStrokes(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, hoverNode);


}

if (this.buffers.triangles) {
this.drawSceneTriangles(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
}

if (this.buffers.points) {
this.drawScenePointStrokes(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, hoverNode);
this.drawScenePoints(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
}
},
// TODO: need to abstract most of this away because it's copied from drawScene
drawHit: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize) {
let layer = this.layer;
let gl = layer.hit.context;




let modelViewMatrix = mat4.create();
let projectionMatrix = mat4.create();
//let shaderProgram = this.shaderPrograms.hit;
Expand All @@ -2393,6 +2398,7 @@ WebGL.prototype = {
let far = 100000.0;

gl.viewport(0, 0, layer.width*Concrete.PIXEL_RATIO, layer.height*Concrete.PIXEL_RATIO);
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
mat4.ortho(projectionMatrix, left, right, bottom, top, near, far);
Expand Down
2 changes: 1 addition & 1 deletion engine/dist/ElGrapho.min.js

Large diffs are not rendered by default.

30 changes: 19 additions & 11 deletions engine/src/WebGL.js
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,9 @@ let WebGL = function(config) {
let gl = layer.scene.context;
let hitGl = layer.hit.context;

gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.enable(gl.DEPTH_TEST);
//gl.getExtension('OES_standard_derivatives');
//gl.enable(gl.BLEND);

hitGl.clearColor(1.0, 1.0, 1.0, 1.0);
hitGl.enable(hitGl.DEPTH_TEST);
};

Expand Down Expand Up @@ -278,9 +276,14 @@ WebGL.prototype = {
drawScene: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize, focusedGroup, hoverNode) {
let layer = this.layer;
let gl = layer.scene.context;




let modelViewMatrix = mat4.create();
let projectionMatrix = mat4.create();


// const fieldOfView = 45 * Math.PI / 180; // in radians
// const aspect = layer.width / layer.height;
// const zNear = 0.01;
Expand All @@ -294,29 +297,33 @@ WebGL.prototype = {
let far = 11.0;

gl.viewport(0, 0, layer.width*Concrete.PIXEL_RATIO, layer.height*Concrete.PIXEL_RATIO);

gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // To disable the background color of the canvas element
mat4.ortho(projectionMatrix, left, right, bottom, top, near, far);
mat4.translate(modelViewMatrix, modelViewMatrix, [panX, panY, 0]);
mat4.scale(modelViewMatrix, modelViewMatrix, [zoomX, zoomY, 1]);

//console.log(modelViewMatrix);

// each draw instruction is layered beneath current bitmap, so have to do them in reverse
if (this.buffers.points) {
this.drawScenePoints(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
this.drawScenePointStrokes(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, hoverNode);


}

if (this.buffers.triangles) {
this.drawSceneTriangles(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
}

if (this.buffers.points) {
this.drawScenePointStrokes(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup, hoverNode);
this.drawScenePoints(projectionMatrix, modelViewMatrix, magicZoom, nodeSize, focusedGroup);
}
},
// TODO: need to abstract most of this away because it's copied from drawScene
drawHit: function(panX, panY, zoomX, zoomY, magicZoom, nodeSize) {
let layer = this.layer;
let gl = layer.hit.context;




let modelViewMatrix = mat4.create();
let projectionMatrix = mat4.create();
//let shaderProgram = this.shaderPrograms.hit;
Expand All @@ -337,6 +344,7 @@ WebGL.prototype = {
let far = 100000.0;

gl.viewport(0, 0, layer.width*Concrete.PIXEL_RATIO, layer.height*Concrete.PIXEL_RATIO);
gl.clearColor(1, 1, 1, 1);
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
//mat4.perspective(projectionMatrix, fieldOfView, aspect, zNear, zFar);
mat4.ortho(projectionMatrix, left, right, bottom, top, near, far);
Expand Down
10 changes: 4 additions & 6 deletions engine/src/shaders/point.frag
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,24 @@
//https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
//#extension GL_OES_standard_derivatives : enable

//https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
// https://www.desultoryquest.com/blog/drawing-anti-aliased-circular-points-using-opengl-slash-webgl/
// https://www.desultoryquest.com/blog/downloads/code/points.js
precision mediump float;
in vec4 vVertexColor;
out vec4 fragColor;

void main(void) {
float r = 0.0, delta = 0.0, alpha = 1.0;
vec2 cxy = 2.0 * gl_PointCoord - 1.0;

r = dot(cxy, cxy);

if (r > 1.0) {
discard;
}

// r = dot(cxy, cxy);
// delta = fwidth(r);
// alpha = 1.0 - smoothstep(1.0 - delta, 1.0 + delta, r);
// if (r > 1.0) {
// discard;
// }




Expand Down
2 changes: 1 addition & 1 deletion package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

0 comments on commit 90e997b

Please sign in to comment.