Graphviz Demos

Moving Data from vertices to VBO

digraph { graph [ rankdir=TB; bgcolor="#333333" color=white; fontcolor=white; ] node [shape=record; style=filled; fillcolor="0.3 0.4 0.5"; color=lightgray; fontcolor=white;] edge [color=orange; fontcolor=yellow] start [shape=point width=0.2 fillcolor="#222222"] vbo [label=" | | | | |" xlabel="vbo"] vertices [label="0.0 | 0.5 | -0.5 | -0.5 | 0.5 | -0.5" xlabel="vertices"] ARRAY_BUFFER [style="filled,rounded" shape=box fillcolor="#88AACC99" fontcolor="white"] start -> vbo [style=dashed; color=gray; label=" 1. createBuffer"] vbo -> ARRAY_BUFFER [style=dashed; color=gray; label=" 2. bindBuffer ";] {rank=same vertices start} vertices -> ARRAY_BUFFER [label=" 3.1 bufferData (vertices to binding target)"]; ARRAY_BUFFER -> vbo [label="3.2 bufferData (binding target to buffer)"] }

WebGL Shaders

digraph { graph [bgcolor=invis pencolor=darkgray rankdir=LR] node [style="filled,rounded" fillcolor="#88AACC99" color=lightblue fontcolor=white shape=box] edge [color=white] subgraph cluster_UserClient { label="User Client" fontcolor=orange bgcolor = "0.3 0.4 0.4" colors,vertices } subgraph cluster_Server { label="WebGL Server" fontcolor=lightgreen bgcolor="0.2 0.2 0.5" subgraph cluster_Buffers { label="WebGL Buffers" fontcolor=orange bgcolor = "0.3 0.4 0.4" colorsVBO verticesVBO } subgraph cluster_Shaders { label="Shaders in GPU" fontcolor=orange; bgcolor="0.3 0.4 0.4" subgraph cluster_VS { label="Vertex Shader" bgcolor = "0.3 0.7 0.2" aColor,aPosition [shape=diamond fontcolor=cyan] vColorOut [label="vColor" fontcolor=darkgray shape=cds] gl_Position [fontcolor=red fillcolor=lightgreen] aColor -> vColorOut aPosition -> gl_Position } subgraph cluster_FS { label="Fragment Shader" bgcolor = "0.3 0.7 0.2" vColorIn [label="vColor" shape=hexagon] gl_FragColor [fontcolor=red fillcolor=lightgreen] vColorIn -> gl_FragColor } vColorOut -> vColorIn } } colors -> colorsVBO -> aColor vertices -> verticesVBO -> aPosition FrameBuffer [label="Frame Buffer" fillcolor="#444444" fontcolor=lightgreen] gl_Position,gl_FragColor -> FrameBuffer }

WebGL Client-Server Model

digraph { graph [ bgcolor=invis; pencolor=darkgray; /* color to draw clusters bounding box */ rankdir=LR; fontnames = "Helvetica, Arial, sans-serif"; ] node [ style="filled,rounded"; fillcolor="#88AACC99"; color=lightblue; fontcolor="white"; shape="box"; ] edge [color=white]; A [label="User Client"]; subgraph cluster_1 { label="WebGL Server" fontcolor="orange"; /* label color */ bgcolor="#222222"; B [label="WebGL Buffers"]; C [label="Shaders in GPU"]; } D [label="Frame Buffer"]; A -> B -> C -> D; }

Using CSS Colors

digraph { graph [ bgcolor = invis; label = <<font color="orange">WebGL Pipelines</font>>; labelloc = t; ]; node [style="filled,rounded", fillcolor="#88AACC99", color=lightblue, fontcolor="white", shape="box"]; edge [color = "#cccccc"]; A [label="JavaScript Client", style=rounded]; B [label="WebGL Server"]; C [label="Frame Buffer", fontcolor="yellow"]; A,B -> C; }

Clusters

digraph { graph [ bgcolor = invis; pencolor = cyan; /* color to draw clusters bounding box */ ]; node [style = filled; color = "#336699"]; edge [color = white]; subgraph cluster_1 { label = "Cluster"; bgcolor = "0.3 0.5 0.5"; fontcolor = "orange"; /* label color */ style = rounded; A -> B; } subgraph bb { node [fillcolor = "#99999966"; color=lightblue; fontcolor=white]; C -> D; } }

Edges

digraph { compound=true; subgraph cluster_a { label="Cluster A"; node1; node3; node5; node7; } subgraph cluster_b { label="Cluster B"; node2; node4; node6; node8; } node1 -> node2 [label="1", arrowhead = odiamond, taillabel = "from"]; node3 -> node4 [label="2" ltail="cluster_a"]; node5 -> node6 [label="3" lhead="cluster_b"]; node7 -> node8 [label="4" ltail="cluster_a" lhead="cluster_b"]; }

rank1

digraph { rankdir = TB; subgraph clusterA { {rank=same; a;b;} a -> b; } subgraph clusterB { {rank=same; c;d;} c -> d; } b -> c }

rank2

digraph { rankdir=LR {rank=max;FrameBuffer;} subgraph clusterA { label="User Client" colors vertices } subgraph clusterF { label="WebGL Server" subgraph clusterB { label="WebGL Buffers" colorsVBO verticesVBO } subgraph clusterC { label="Shaders" subgraph clusterD { label="Vertex Shader" aPosition aColor vColor1 gl_Position } subgraph clusterE { label="Fragment Shader" vColor2 gl_FragColor } } } FrameBuffer vertices -> verticesVBO -> aPosition -> gl_Position -> FrameBuffer colors -> colorsVBO -> aColor -> vColor1 -> vColor2 -> gl_FragColor -> FrameBuffer }

Random Start for fdp

digraph { layout=fdp start=random rankdir = LR subgraph clusterA { label="Vertex Shader"; aColor1 -> vColor1 aPosition -> gl_Position } subgraph clusterB { label="Fragment Shader"; vColor2 gl_FragColor vColor2 -> gl_FragColor } /*{rank=same; aPosition; vColor;} {rank=same; gl_Position; gl_FragColor;}*/ {rank=same; FrameBuffer;} vColor1 -> vColor2; gl_Position -> FrameBuffer gl_FragColor -> FrameBuffer }

每次运行，得到的图像都是随机的。