I'm getting into web animations, WebGL, Canvas, ThreeJS, GSAP and all those fun tools. I'm investigating different websites and how they're able to achieve certain effects.
I am mind blown by these two sites: https://14islands.com/ & https://www.hellomonday.com/.
Their animations look simple(ish). Liquid effect on images. I know with ThreeJS filters or WebGL or other Canvas libraries you can achieve the effects. What I don't understand is that both of these sites have a full-sized <canvas> element fixed to the background. And render almost all the images on the site through the <canvas> rather than pure HTML elements.
This allows to have all images to have really dope effects. But what I don't understand is how can they sync the positions and sizes of the images with HTML DOM elements so perfectly?
This seems like a nightmare to code. Also wouldn't it be a huge performance burden to update every image on the canvas when the user scrolls or resizes the page?
I believe I'm missing something. Perhaps there's a library that handles most of this?
If there are any simple examples, I'd love to see them.
Thank you for your time :)
Welp turns out this can be done quite simply with ThreeJS. Perhaps there are ways as well but this seems easiest to me.
TL;DR: You can create a scene for a div, and you can do this multiple times with ThreeJS so that it renders a scene within the specified div.
Demo: https://threejs.org/examples/?q=multiple#webgl_multiple_elements
Code: https://github.com/mrdoob/three.js/blob/master/examples/webgl_multiple_elements.html
Related
I hope this Question is still accepted in Stack Overflow since What I want to Know is The technique to make this effect. Recently I found a very cool website Landing animation that give effect such as light particle (this looks like parallax.js as far as I know) that moving while we move our mouse and a Luminous effect while hovering in a specific location.
I know fully that we can Achieve Hover using css and light particle using javascript, but how can I achieve this while using a canvas like in this website for example? when I tried to inspect element of this site, it seems using canvas to achieve this, so I'm curious if I want to make a website like this, what is the technique I must learn since I'm quite confused where to start if I want to achieve this kind of effect?
reference site: Genshin Impact landing page
the effect that I want to achieve:
Can someone help me or tell me where must I start if I want to achieve this, since I want to try learning to make this kind of cool Effect using css and Js?
some article that I read:
2-ways-to-create-an-animated-particle-background
particles-animation-codepen
particle-animation-code-snippets
easing-animations-in-canvas/
how-to-achieve-this-hover-effect
Websites like these are built using WebGL which uses GPU to render these 3d effects. GPU usage is only possible through the canvas as of now.
There are various javascript libraries out there through which you can achieve such results. The most popular among them is three.js. It is used to build amazing 3d websites nowadays. Some other libraries are babylon.js, particle.js etc.
I'm trying to make my webpage more interactive by making a small town-like map, with different buildings that are clickable and lead to different pages on my site, but I'm having a lot of difficulty animating the webpage with just HTML/JS and also making it stay the same even after resizing the window.
This is my test site right now, for clarity: https://people.ucsc.edu/~anlin/test#
(I am currently just switching between a png of the map and a gif of the buildings moving when the mouse is hovering)
How can I accomplish this, and should I be using something other than plain html/js to do this?
Thanks!
Probably svg would help you out. You can do awesome interactive stuff with svg. Meanwhile, you can also use css to create great animations. It really depends on what you need.
Check this out: https://medium.freecodecamp.org/a-guide-to-svg-on-web-c5932dadca03
Some examples:
https://codepen.io/search/pens/?q=svg%20animations&limit=all&order=popularity&depth=everything&show_forks=false
You can use an <svg> , which is a "scalable vector graphic"
Here is almost an exact example of what you described
https://codepen.io/dudleystorey/pen/ltpmv
I am working on a javascript canvas game and I would like to improve the performance of the game. I am reading some articles about how to achieve better performance - one technique being pre-rendering.
Does it make sense to render every object, each of which has a texture, to it's own separate canvas element? Here is an example of an entity I am rendering:
fruitless.ctx.save();
fruitless.ctx.translate(this.body.GetPosition().x,this.body.GetPosition().y);
fruitless.ctx.rotate(this.body.GetAngle());
fruitless.ctx.scale(this.scale.x, this.scale.y);
fruitless.ctx.drawImage(this.texture, ... )
this.face.draw();
fruitless.ctx.restore();
So essentially I am running the drawImage() function each iteration... Pre-rendering suggests this drawImage() should be done in the initialisation (just once) - is that right?
Hard to give specific recommendations without knowing more...but here's a start:
Put any static background elements in an html image and lay that image down first. Scroll the background image if it is static but larger than your game viewport.
Sort animated elements by when they need to animate into several groups. So sun and cloud elements that animate on frame#5 will be one group. A grape-man and raison-man that animate every frame will be in a different group. Create a canvas for each of these several groups.
Put infrequently animated elements on a sprite-sheet.
Put frequently animated elements in their own image object.
Put frequently re-textured elements in their own offscreen canvas and re-texture there. Here's the trade: canvas's operate poorly on mobile, so you don't want a lot of canvases on mobile. But pre-rendering all variations of textures into image objects takes up a lot of memory.
Bottom line:
Pre-rendering will undoubtedly give you a performance boost.
But you need to test various pre-rendering strategies to see which works best on which device
To answer this question:
Does it make sense to render every object, each of which has a texture, to it's own separate canvas element? Here is an example of an entity I am rendering:
Well, that depends. How many are there? and what are they doing?
If they're all whizzing around all the time, then you might as well keep them all on the same canvas element as, regardless, this will be consistently updated.
If some are static, group them.
Your goal is to do as few drawImage calls as possible as this is fairly expensive.
Also, talking broadly, it's a good idea to leave the micro optimisations till the end.
I'm making an TV Guide. See http://i.tv/guide for an example implementation using Canvas.
I need to make lots of little boxes representing each show. I need to be able to scroll them around, both vertically (channels) and horizontally (time). To make it with Canvas, my understanding is that the only way to implement scrolling is to intercept the correct events, and redraw the canvas smoothly with new offsets many times a second.
If I were to use divs, I could slap scrollbars on it and let it scroll normally. I could position them once, and let the scrolling move them around, rather than re-calculating their new offsets.
Which should I pick for this kind of project? If I use divs will it be too slow? Some lineups have 500 channels. I want to display up to 4 hours at once.
Thanks!
I would strongly recommend using plain HTML in preference to canvas, for interactive elements. Apart from the speed issue (divs are usually going to be faster than drawing it all manually yourself), HTML is designed to offer accessibility and usability features for free, which you'd have to do a lot of work to get even partially from canvas.
The canvas-based guide as linked has the following drawbacks:
very slow to render/scroll, for me;
impervious to keyboard navigation;
no HTML link actions (like middle-click-link-to-open-in-new-tab or right-click-bookmark);
text not copy/pastable;
a dead loss for accessibility tools like screen-readers;
reduced browser compatibility;
invisible to search engines.
Use canvas for pretty graphical and interactive effects you can't achieve with plain HTML. To be honest I don't even see any of that on i.tv's site; I have no idea why they have implemented it in this seemingly-crazy way.
Doing it with DIV's wont have issues with speed. Browsers rendering engines are built to render elements. DOM rendering is faster than canvas rendering in a lot of cases, take isogenicengine they use DOM based rendering to render thousands of elements to make games You should implement it based on your technical ability. Both technologies will be able to do what you want. Personally I would choose canvas but I see no issue with DOM rendering.
Good Luck.
I think there are two diffrent solutions for the problem:
1) First the solution shown by aves Engine, which renders the whole game with html elements and external stylesheets e.g. CSS3 transfomations. Pro's are that the event-handling is much easier when working with div's than by rendering on canvas.
2) Like isogenicengine.com shows you could render the game on html5 canvas element. Mabye that's the better solution, because rendering on canvas is the way that millions of 2D-games were written before and in future the industry will optimize the drawing methods e.g. with hardware acceleration. At the moment the contra is that rendering on canvas is slow if you would like to render in fullscreen. If you would like to render only in a specific area of 200x200px that's okay, but in fullscreen you get stuck with a framerate of 10fps.
What do you think is the better way to create a game for the web?
Thanks for your opinion!
PS: If you have some articles about the topic please paste some links
I don't think it's a clear one size fits all kind of thing. I really think it depends on what you want to do with your game.
If you are doing a lot of vector graphic manipulation, perhaps canvas is a better choice vs engine like aves. For tiled based, maybe aves will work better.
You can render fast on fullscreen canvas if you're clever about only re-rendering dirty regions. But if your whole canvas needs to change every frame this obviously isn't going to help much.
I've spent alot of time recently looking into this issue and my conclusion is pretty simple.
Use HTML Elements, lets say that HTML5 actually makes progress and in one year the major browser support it. How long does it then take to get the general user base of the web on the latest browser (IE6 still has a choke hold in some sectors). So making the game available to as many people as possible is key! (In my mind anyways)
If however, your looking to learn and develop, go with canvas.