Skip to content

Commit f31e9f7

Browse files
kigkig
committed
fix cones for coordinate axes, minimal example
1 parent 5cb3b63 commit f31e9f7

File tree

4 files changed

+125
-6
lines changed

4 files changed

+125
-6
lines changed

‎example/cone_minimal.js

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
var createCamera = require('3d-view-controls')
2+
var getBounds = require('bound-points')
3+
var perspective = require('gl-mat4/perspective')
4+
var createAxes = require('gl-axes3d')
5+
var createSpikes = require('gl-spikes3d')
6+
var createSelect = require('gl-select-static')
7+
var getBounds = require('bound-points')
8+
var mouseChange = require('mouse-change')
9+
var createConePlot = require('../cone')
10+
var createMesh = createConePlot.createConeMesh;
11+
12+
var bounds = []
13+
14+
var conePlot = createConePlot({
15+
positions: [[0.5, 0.5, 0.5], [1,1,1], [1.5, 1.5, 1.5]],
16+
vectors: [[0.05, 0, 0], [0, 0.05, 0], [0, 0, 0.05]],
17+
colormap: 'portland'
18+
}, bounds)
19+
20+
var canvas = document.createElement('canvas')
21+
document.body.appendChild(canvas)
22+
window.addEventListener('resize', require('canvas-fit')(canvas))
23+
var gl = canvas.getContext('webgl')
24+
25+
var camera = createCamera(canvas, {
26+
eye: [3,3,3],
27+
center: [0,0,0],
28+
zoomMax: 500,
29+
mode: 'turntable'
30+
})
31+
32+
33+
var mesh = createMesh(gl, conePlot)
34+
35+
var select = createSelect(gl, [canvas.width, canvas.height])
36+
var tickSpacing = 1;
37+
var ticks = bounds[0].map((v,i) => {
38+
var arr = [];
39+
var firstTick = 0; //Math.ceil(bounds[0][i] / tickSpacing) * tickSpacing;
40+
var lastTick = 3; //Math.floor(bounds[1][i] / tickSpacing) * tickSpacing;
41+
for (var tick = firstTick; tick <= lastTick; tick += tickSpacing) {
42+
if (tick === -0) tick = 0;
43+
arr.push({x: tick, text: tick.toString()});
44+
}
45+
return arr;
46+
});
47+
var axes = createAxes(gl, { bounds: bounds, ticks: ticks })
48+
var spikes = createSpikes(gl, {
49+
bounds: bounds
50+
})
51+
var spikeChanged = false
52+
53+
mouseChange(canvas, function(buttons, x, y) {
54+
var pickData = select.query(x, canvas.height - y, 10)
55+
var pickResult = mesh.pick(pickData)
56+
if(pickResult) {
57+
spikes.update({
58+
position: pickResult.position,
59+
enabled: [true, true, true]
60+
})
61+
spikeChanged = true
62+
} else {
63+
spikeChanged = spikes.enabled[0]
64+
spikes.update({
65+
enabled: [false, false, false]
66+
})
67+
}
68+
})
69+
70+
function render() {
71+
requestAnimationFrame(render)
72+
73+
gl.enable(gl.DEPTH_TEST)
74+
75+
var needsUpdate = camera.tick()
76+
var cameraParams = {
77+
projection: perspective([], Math.PI/4, canvas.width/canvas.height, 0.1, 300),
78+
view: camera.matrix
79+
}
80+
81+
if(needsUpdate || spikeChanged) {
82+
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
83+
gl.viewport(0, 0, canvas.width, canvas.height)
84+
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
85+
axes.draw(cameraParams)
86+
spikes.draw(cameraParams)
87+
mesh.draw(cameraParams)
88+
spikeChanged = false
89+
}
90+
91+
if(needsUpdate) {
92+
select.shape = [canvas.width, canvas.height]
93+
select.begin()
94+
mesh.drawPick(cameraParams)
95+
select.end()
96+
}
97+
}
98+
render()

‎lib/triangle-vertex.glsl

Lines changed: 15 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,20 @@ varying vec3 f_normal
2121
varying vec4 f_color;
2222
varying vec2 f_uv;
2323

24+
25+
vec3 getOrthogonalVector(vec3 v) {
26+
// Return up-vector for only-z vector.
27+
// Return ax + by + cz = 0, a point that lies on the plane that has v as a normal and that isn't (0,0,0).
28+
// From the above if-statement we have ||a|| > 0 U ||b|| > 0.
29+
// Assign z = 0, x = -b, y = a:
30+
// a*-b + b*a + c*0 = -ba + ba + 0 = 0
31+
if (v.x*v.x > 0.1 || v.y*v.y > 0.1) {
32+
return normalize(vec3(-v.y, v.x, 0.0));
33+
} else {
34+
return normalize(vec3(0.0, v.z, -v.y));
35+
}
36+
}
37+
2438
// Calculate the cone vertex and normal at the given index.
2539
//
2640
// The returned vertex is for a cone with its top at origin and height of 1.0,
@@ -61,11 +75,7 @@ vec3 getConePosition(vec3 d, float index, out vec3 normal) {
6175
vec3 v1 = vec3(0.0);
6276
vec3 v2 = v1 - d;
6377

64-
vec3 u = vec3(0.0, 1.0, 0.0);
65-
if (u == -normal) {
66-
u = vec3(1.0, 0.0, 0.0);
67-
}
68-
u = normalize(cross(u, d));
78+
vec3 u = getOrthogonalVector(d);
6979
vec3 v = normalize(cross(u, d));
7080

7181
vec3 x = u * cos(angle) * length(d)*0.25;

‎minimal.html

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<!doctype html>
2+
<html>
3+
<head>
4+
<title>gl-cone3d minimal example</title>
5+
</head>
6+
7+
<body>
8+
<script src="build/example_minimal.js"></script>
9+
</body>
10+
</html>
11+

‎package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -23,7 +23,7 @@
2323
"gl-spikes3d": "^1.0.5"
2424
},
2525
"scripts": {
26-
"build-example": "browserify -o build/example.js example/cone.js && browserify -o build/example_sparse.js example/cone_sparse.js",
26+
"build-example": "browserify -o build/example.js example/cone.js && browserify -o build/example_sparse.js example/cone_sparse.js && browserify -o build/example_minimal.js example/cone_minimal.js",
2727
"test": "echo \"Error: no test specified\" && exit 1"
2828
},
2929
"repository": {

0 commit comments

Comments
 (0)