Menu
I'm doing some prototyping, and I'm displaying some data in 3D using three.js (version 68). Desired result of whole animation would be a bunch of colored balls (that represent protons and neutrons that are colored according to some schema). Everything works good, but for reasons unknown to me rendered results are pixcelated.
Current version basically looks like that (this image is ~400px wide): 
I have checked all obvious things like: passing incorrect resolution, browser scaling and so forth.
You can see this issue on this fiddle, and download the webpage here.
And also here are revelant parts of 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 that loads 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)
517
It seems that you have not requested antialiasing on the renderer you are using. I don't know coffeescript but in javascript you would do:
renderer = new THREE.WebGLRenderer({ antialias: true });
Antialiasing also was a factor (see @gaitat answer) but I also forgot to set resoluion the renderer:
renderer.setSize( 1024, 768 )
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With