function render() {
requestAnimationFrame(render)
gl.enable(gl.DEPTH_TEST)
var needsUpdate = camera.tick()
var cameraParams = {
projection: perspective([], Math.PI/4, canvas.width/canvas.height, 0.01, 1000),
view: camera.matrix
}
if(needsUpdate || spikeChanged) {
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
gl.viewport(0, 0, canvas.width, canvas.height)
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
axes.draw(cameraParams)
spikes.draw(cameraParams)
mesh.draw(cameraParams)
spikeChanged = false
}
if(needsUpdate) {
select.shape = [canvas.width, canvas.height]
select.begin()
mesh.drawPick(cameraParams)
select.end()
}
}
function render () {
raf(render)
const width = canvas.width
const height = canvas.height
gl.viewport(0, 0, width, height)
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.enable(gl.DEPTH_TEST)
gl.enable(gl.CULL_FACE)
const nodes = getNodes()
sphere.bind(shader)
shader.uniforms.proj = perspective(proj, Math.PI / 2, width / height, 0.1, 100)
shader.uniforms.view = camera.tick()
for (var i = 0; i < nodes.length; i++) {
var node = nodes[i]
node.data.position[1] = Math.sin(Date.now() / 1000 + i / 2) * 1.5
identity(model)
translate(model, model, node.data.position)
scale(model, model, node.data.scale)
shader.uniforms.model = model
sphere.draw()
}
}
function render () {
raf(render)
const height = canvas.height
const width = canvas.width
const nodes = getNodes()
gl.viewport(0, 0, width, height)
gl.clearColor(0.08, 0.04, 0.15, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.enable(gl.DEPTH_TEST)
gl.enable(gl.CULL_FACE)
sphere.bind(shader)
shader.uniforms.proj = perspective(proj, Math.PI / 4, width / height, 0.1, 100)
shader.uniforms.view = camera.tick()
shader.uniforms.eye = eye(camera.view(), eyeVector)
shader.uniforms.time = (Date.now() - start) / 1000
scene.each(function (node) {
node.setRotation(
1.20 * Math.sin(Date.now() / 10000 * 1.5),
0.80 * Math.sin(Date.now() / 2339 * 1.5),
0.45 * Math.sin(Date.now() / 9000)
)
})
scene.tick()
for (var i = 0; i < nodes.length; i++) {
shader.uniforms.model = nodes[i].modelMatrix
shader.uniforms.normalMatrix = nodes[i].normalMatrix
shader.uniforms.sphereDepth = nodes[i].data.depth
sphere.draw()
}
}
projection: function ({viewportWidth, viewportHeight}) {
return perspective(cameraState.projection,
Math.PI / 4.0,
viewportWidth / viewportHeight,
0.01,
1000.0)
}
initResources: function() {
var gl = this.gl;
this.context = new Context(gl);
this.eye = [14, 12, 14];
this.target = [0, 0, 0];
this.up = [0, 1, 0];
this.camProjectionMatrix = perspective(createMat4(), Math.PI/4, this.width/this.height, 0.1, 500);
this.viewMatrix = lookAt(createMat4(), this.eye, this.target, this.up);
this.boxModelMatrix = createMat4();
this.showNormalsProgram = new Program(gl, this.resources.ShowNormalsVert, this.resources.ShowNormalsFrag);
},
function render() {
const width = gl.drawingBufferWidth
const height = gl.drawingBufferHeight
gl.viewport(0, 0, width, height)
gl.clearColor(0, 0, 0, 1)
gl.clear(gl.COLOR_BUFFER_BIT)
gl.enable(gl.CULL_FACE)
gl.enable(gl.DEPTH_TEST)
camera.view(view)
camera.tick()
perspective(proj, Math.PI / 4, width / height, 0.01, 100)
snowden.bind(shader)
shader.uniforms.time = (Date.now() - start) / 1000
shader.uniforms.proj = proj
shader.uniforms.view = view
shader.uniforms.eye = eye(view)
snowden.draw()
}
_getViewport(props) {
const {
// viewport arguments
x,
y,
width, // Width of viewport
height, // Height of viewport
viewState
} = props;
const {
// view matrix arguments
eye, // Defines eye position
lookAt = [0, 0, 0], // Which point is camera looking at, default origin
up = [0, 1, 0] // Defines up direction, default positive y axis
} = viewState;
// Projection matrix arguments
// TODO - Extracting from viewState is deprecated
const fovy = props.fovy || viewState.fovy || 75; // Field of view covered by camera
const near = props.near || viewState.near || 1; // Distance of near clipping plane
const far = props.far || viewState.far || 100; // Distance of far clipping plane
const aspect = Number.isFinite(viewState.aspect) ? viewState.aspect : width / height;
const fovyRadians = fovy * DEGREES_TO_RADIANS;
return new Viewport({
id: this.id,
x,
y,
width,
height,
viewMatrix: mat4_lookAt([], eye, lookAt, up),
projectionMatrix: mat4_perspective([], fovyRadians, aspect, near, far)
});
}
onResize: function(e) {
perspective(this.camProjectionMatrix, Math.PI/4, this.width/this.height, 0.1, 100);
},