I know the HTML canvas can achieve some pretty nice effects when using different composition modes, but I can't figure out how to achieve an effect similar to GIMP's Supernova:
I'm not sure whether there's an "established" way of coding this kind of effect or whether it's a highly custom GIMP filter that would be very difficult to reproduce on the canvas. Ideally, the function would be able to plug in variables similar to the ones shown in GIMP's options dialog.
Related
I have been looking at Epic Games' Fortnites Website and I am trying to figure out how they achieved the 3D effect on the page:
Epic Games' Fortnite website - scrolled down to 3rd slide
Does any one have any idea how to do it? I would really like something similar to a project I'm working on. I have found Three.js, but I am quite sure that is not the solution they went with.
For these types of questions, i can only recommend to install spector.js and have a look yourself. In short: everything you see is 100% faked.
I mean, that's always the case. In fact, if you want to build something like that, your first question should always be: how much of this can I fake and still get away with that?
In this example, it turns out: everything. Just open the devtools and click through all the assets in the network-tab. You will find these two textures:
looks familiar, right?
So what they appear to be doing is they are using three.js with some custom shaders to handle the translations, the flickering of the lights and the highlighting. These effects are computed using the normal-map and an additional mask-texture which I couldn't quite figure out what it does. But again, if you look at the scene in spector.js you can see the shaders used for every drawcall.
The only thing that is a bit more complex is the little robot-friend in the bottom left corner. But again, it's not 3d as in meshes and so on but rather a set of flat textured quads running a bones-animation thing.
I think that makes it a really great website after all.
Given that epic is building the unreal-engine I would suspect the original renders were done there. And I agree, the lighting looks really amazing :)
It is a simple parallax effect using animated sprite sheets.
Parallax effect is achieved by using several layers of images/video on top of one another in different Z-depth.
You can achieve the moving part by using the mousemove event to track the cursor.
I'm trying to create a interactive geographic map with Phaser framework that is similar to this http://preview.codecanyon.net/item/interactive-usa-map-html5/full_screen_preview/4527698 so what I was looking into is loading tile maps from JSON or CSV, but I'm not sure this is the right approach.
I know it's abstract question but I just wanted to be sure I'm moving into right direction and see if there are other ways to do this
I'm not sure a Tilemap is going to help you here. There's nothing 'tiled' or uniform about that map. While you could achieve it using Object placement in Tiled, I still think it's probably not the best route.
Personally I'd question the use of Phaser for something like this, and I wrote it! If I had to re-create the map you linked to, I would be looking at SVG and a library like paper.js instead, which just seems far more suited to this particular task.
I have a Network Diagram(Nodes and Edges) in SVG generated by GraphViz tool. I want to make the diagram interactive in the sense, it should be draggable, on click of a node some other nodes to be hidden.ETC. Can any one suggest snapSVG is sufficient for that? I cannot add any thing to the SVG diagram that is my restriction. How can we make existing svg diagrams forced directed? Any help, starting point, fiddle will be helpful. I have hands on in d3.js is it achievable by d3.js?
This should be possible, maybe be aware Snap.svg isn't so compatible with older browsers (in which case you could look at Raphael which is Snaps older brother, d3 is very well established as well). They all have all the basics, handlers, animation etc. However, although its possible, it may well be quite a lot of work (so may want to stick with what you know).
You may want to look into whether you want to autocreate connecting elements and move automatically, or are happy moving endpoints manually.
It may also depend on things like what you want to happen after dragging the elements. Do you want to save them ? Some of that may be quite important as to how you approach it, maybe more important than dragging as most will support that.
I'm using RaphaelJS to implement some event-heavy SVG. I have a set of paths on a canvas, and a point. How can I get all the paths that cross that point? Relatively new at this, but I assumed this would be trivial and I can't find anything about it.
If it helps, the specific implementation is trying to detect on the mousedown event if I've clicked on a path so I can rotate it around another point onmousemove.
Unfortunately, I'm not aware of a portable (supporting both the SVG and VML backends of raphael) way to do this without implementing the math yourself. However, for browsers that support SVG, the SVG spec includes built-in support for exactly what you are requesting:
http://www.w3.org/TR/SVG/struct.html#_svg_SVGSVGElement__getIntersectionList
Vector is math. Find the equations of the lines and see if the point fulfill the equation.
Hey guys, I would like to develop a light/laser show editor and simulator, and for this of course I am going to learn some graphics programming. I am thinking about using C# and XNA.
I was just wondering what aspects of graphics programming I should research or focus on given the project I am working on. I am new to graphics programming so I don't know much about it, but for example I imagine something that I might look into would (possibly?) be volumetric lighting.
For example, what would be a practical way to go about rendering a 'laser' of varied width/color? I read somewhere to just draw a cylinder and apply a shader to it, I would like to confirm that this is the way.
Given that this seems like a big project, I was thinking about starting off by creating light sources and giving them properties so that I can easily manipulate them. I have (mis)read that only a certain amount of lights can be rendered at any given time, I believe eight. Does this only apply to ambient lights? Given this possible limitation, and the fact that most of the lights I will use will be directional, such as head-lights or lasers, what would be a different way to render these? Is that what volumetric lighting would be?
I'd just like to get some things clear before I dive into it. Since I'm new to this I probably didn't make the best use of words, so if something doesn't make sense please let me know. Thanks and sorry for my ignorance.
The answer to this depends on the level of sophistication that you need in your display simulation. Computer graphics is ultimately a simulation of the transport of light; that simulation can be as sophisticated as calculating the fraction of laser light deflected by particles in the atmosphere to the viewer's eyepoint, or as simple as drawing a line. Try out the cylinder effect and see if it works for your project. If you need something more sophisticated, look into shader programming (using Nvidia Cg, for example), and volumetric shading as you mentioned; also post-processing glow effects may be useful. For OpenGL, I believe there is a limit of 8? light sources in a scene, but you could conceivably work around this limit by doing your own shading logic.
Well if it's just for light show simulations I'd imagine your going to need a lot of custom lighting effects - so regardless if you decide to use XNA or straight DirectX your best bet would be to start by learning shader languages and how to program various lighting effects using them. Once you can reproduce the type of laser lighting you want, then you can experiment with the polygons you want to use to represent the lasers. (I've used the cylinder method in some of my work for personal purposes, but I'm not sure how well straight cylinders will fit your purpose).
Although its faster, I think its best not to use vanilla hardware lighting because of its limitations. Pixel shaders can help with you task. Also you may want to chose OpenGL because of portability and its clarity in rendering methods. I worked on Direct3D for several years before switching to OpenGL. OpenGL functions and states are easier to learn and rendering methods (like multi-pass rendering) is a lot clear. If you like to code on C# (which I dont recommend for these tasks), you can use CsGL library to access OpenGL functions.