Currently, I am engaged in prototyping and showcasing data in a 3D format using three.js (version 68). The intended outcome of the entire animation is to have a collection of colored spheres representing protons and neutrons, each colored based on a specific scheme. Although everything seems to be functioning well, the rendered results appear to be pixelated for reasons unknown to me.
The current version of the visualization looks something like this (the image is approximately 400px wide):
I have thoroughly checked for common issues such as incorrect resolution settings, browser scaling problems, and so on.
You can observe this problem on this fiddle, and download the webpage from here.
Additionally, below are the relevant sections of the code:
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<script src="js/jquery.js"></script>
<script src="js/coffee-script.js"></script>
<script src="js/three.js"></script>
<script src="js/OrbitControls.js"></script>
<script src="js/animtest/load_event.js"></script>
<style>canvas { width: 100%; height: 100% }</style>
<title></title>
</head>
<body>
<div id="animation"
style="width: 1024px; height: 768px; ">
</div>
<script>
$(function(){
ctrl = new AnimController("#animation");
ctrl.set_up_scene();
ctrl.render();
ctrl.display_frame(4);
});
</script>
</body>
</html>
Here is the CoffeeScript code responsible for loading the animation:
class AnimController
...
set_up_scene: () ->
@scene = new THREE.Scene()
el = $(@element_name)
@camera = new THREE.PerspectiveCamera(45
el.width() / el.height(),
1, 20000
)
@camera.position.set(100, 100, 0)
@scene.add(new THREE.AmbientLight(0x111111))
@renderer = new THREE.WebGLRenderer()
el.html(@renderer.domElement)
controls = new THREE.OrbitControls(@camera, @renderer.domElement);
controls.addEventListener('change', () =>
console.log("Change")
@render()
)
render: () ->
requestAnimationFrame(() => @render)
console.log("Render")
if @update_scene
material = new THREE.MeshBasicMaterial() #"color": 0xffff00,
geometry = new THREE.SphereGeometry(5, 50, 50)
console.log("Update")
@update_scene = false
@scene = new THREE.Scene()
for particle in @curr_event
p = particle['position']
sphere = new THREE.Mesh(geometry, material);
sphere.position.set(p[0], p[1], p[2])
@scene.add(sphere)
@renderer.render(@scene, @camera)