zhangmenghe / pokemeow-renderer Goto Github PK
View Code? Open in Web Editor NEWThis is an OpenGL(JOGL) 2d graph renderer for Cytoscape. Project for 2017 GSoC
This is an OpenGL(JOGL) 2d graph renderer for Cytoscape. Project for 2017 GSoC
Sometimes renderer should open interface to set position. For example, to tackle with nodes and label, we offer an interface setOrigin to adjust original point.
Here we assume relative position. In this way, (x,y,z) coordinates between [-1,1] (NDC coordinates, OpenGL default use), with no relationship to viewport size.
Inside, we sometimes need switch between absolute pos and relative pos, I put it in commonUtil, see commit here
After reconstructing demos, all drawing demos will support mouse event.
Changing visual properties while drawing is not allowed in previous version.
There are 13 kinds of lines wanted in Cytoscape, first implement them with pure OpenGL
To make better use of GPU, compute absolute position using modelMatrix instead of doing it manually when it is possible. To be specific:
Enhance the performance for Camera. See commits here
Testcase needed.
This issue is the first solution I come up to solve this problem
Previously, I assigned each object its own buffer(VBO / EBO if needed).When initialize the object, buffers are generated along vertices data passed.
However, to dynamically add /delete objects. This does't work fine for buffer has to be allocated(even though no data inside) before drawing.
Solution is:
Arrow is a part of edge. Like node shapes, previous version use awt draw while we want it compatible with gl4.
For we want to use GL4(implemented in Zugzwang), therefore, glBegin() and glEnd() are not supported. Use VAO and VBO instead.
Refer to Zugzwang and make my own structure.
Anti-Grain Geometry(AGG) can be used in many areas of computer programming where high quality 2D graphics is an essential part of the project.
To render high-quality and fast curve using fragment shader and perform very well for Anti-Aliasing.
Here are some reference:
"....High-quality rendering of curves can be achieved using an OpenGL implementation of the Anti-grain Geometry (agg) library."
The following is several circumstance we may want to use AGG:
The unknown matter is the performance difference of pure OpenGL and OpenGL+AGG
In Cytoscape, edges are changed while the corresponding nodes move.Which means, the source and destination position of line should be changed freely as assigned.
As said before, when the nodes' position change, source/dest of edges also change.
see Sample here
More complex testcases needed
PokeMeow renderer routines should be callable from Grind, so fitting them into Grind would be a very good proof of concept.
Here is the shell from which your renderer will be called:
Here is the main Grind project, which can be cloned, compiled, and run (as a Cytoscape app, I think)
Once you have your renderer married to Grind, you should be able to load a network into Cytoscape, have Cytoscape call Grind, and have Grind call your renderer.
An independent demo should be named "XXXTest", while a uniform demo will be named "drawXXXDemo"
The independent demos are always auxiliary.
The uniform demos will be wrap to show in a uniform UI entrance.
Notice that after reconstruction, all demos will be allowed to use mouse event listener
see commits
Notice that there are roughly 5 types of line with 13 different shapes. All of them must look fine when drawing Bezier curve.
There are several ways to determine whether a point is inside polygon.
See wiki
Also, bounding box could used.
Roughly, the following methods could be applied:
The axis-aligned minimum bounding box (or AABB) bounding box
Object oriented minimum bounding box( OBB) see tutorial
Ray-casting
4.Winding number algorithm (more precise but costly)
5.Just let the GPU do all the work for you.Use glReadPixel()
Create a painting surface that is off screen (so you can paint into it, without it appearing anywhere on the screen). Fill it completely with the color black. Now let OpenGL paint your polygon (or even all of your polygons if you just want to test if the point is within any of them, but you don't care for which one) into this drawing surface and fill the polygon(s) with a different color, e.g. white. To check if a point is within the polygon, get the color of this point from the drawing surface. This is just a O(1) memory fetch. If it's white, it's inside, if it's black, it's outside. Easy, isn't it? This method will pay off if you have very little polygons (e.g. 50-100), but a damn lot of points to test (> 1000), in which case this method is much speedier than anything else.
In Zugzwang's work, contents in nodeshape folder just limit every single shape inside a rectangle.
In this way, define (xMin, xMax, yMin,yMax) as the border.
So inside the border, use java.awt to draw directly(like canvas for html).
This part should be replaced by drawing with gl4
Previous label system uses Graphics2D(awt library). See details in TextRenderingUtils.java
Bundle demos as shown in wiki
Make sure all .dll s are in and ...
should be loaded automatically from jar.
Bezier curves have control points.
For example, quadric bezier curve holds one control point and the shape of curve is determined by the position of control point.
Users should be allowed to get their desire curve by dragging control point
Since there are no depth culling in 2D (all nodes face to camera).
Maybe use 3-channel texture.(Now texcoord only x,y)?
Zugzwang's document gives the idea to store per-pixel normal and light intensity, which is strange.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.