Metaballs, Canvas, low fps — OZONE Asylum, home of the Mad Scientists

DHTML/Javascript

Metaballs, Canvas, low fps

This page's ID: 30743

Edit Post

Who can edit a post?	The poster and administrators may edit a post. The poster can only edit it for a short while after the initial post.

Your User Name:
Your Password:
Login Options:	Remember Me On This Computer

Your Text: Insert Slimies » Insert UBB Code » Close Last Tag \| All Tags UBB Help	Hello I have a concept of fancy animated preloader. Take a look at this (it's static, generated image): http://storage.ffreak.net/metaballs/metaballs3.html Now imagine that those balls are satellites and turns around the center one. Every ball represents one image that is currently preloading. When some image is ready then corresponding ball smoothly falls back into center and thus makes center ball bigger. Preloading process ends when last satellite falls into centre. I hope it's clear despite my poor language skills :) But of course I run into performance issues, for example try to mouse over arena: http://storage.ffreak.net/metaballs/metaballs.html In document.title you will get speed of one frame rendering and rounded fps number. And let me tell you this upfront - it's low... Good fps (around 10-12 on Pentium M 1.7GHz) is only possible in Chrome. I've tried every reasonable metaballs/metasurfaces optimization technique I've found on the internet. At the moment I'm using only one - I divided canvas into 5x5 blocks and first I'm checking if I should bother calculating individual pixels or not - that improved speed a lot, but other techniques gave very miserable effect so I gave up with them. The major bottleneck is drawing on canvas - I'm doing it with context.fillRect() and it's painfully slow. I was thinking about Canvas's ImageData but I can't get it to work in any browser (not even Opera) - I don't know if it's me or if it's not implemented yet because I can't find any working demo of ImageData. Should I gave up or maybe you know about some fast implementation of metaballs with Canvas? I don't want to do it with datauris (at least just yet). Ehm... I could talk about various strategies, problems and my test results for long, but I'll stop now, because maybe you just have some working example or you know about some nice technique. If not then I'll try to elaborate on this problem more. Or maybe I should gave up because it's not possible today? Thanks! P.S. I just found this forum, so hello everyone! It's surprises me that forum like this still exists - I thought that last ones extinct about 3 years ago :) Kamil Trebunia // www.ffreak.net Loading...
Options:	Enable Slimies Enable Linkwords

« Backwards — Onwards »

Show Forum Drop Down Menu