css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.
user profile image

Smoke particle system using an old vfx trick of scaled and rotating single sprite texture in WebGL, plus some additive blending for extra sass :)

Color of smoke may be changed by modifying "color" attribute for smokeMaterial on line 45.

Performance improvement can be had by reducing number of particles, and/or removing "opacity" setting from smokeTex (png will supply opacity, opacity setting simply allows us to "tone it back" or make it slightly more transparent)

Low hanging fruit for visual improvement is randomly setting individual particles to have opposite direction rotation (helps with random look, and avoids edge cases where spinning particles are noticeable)

Coolness improvement: wire up angular with an input box to change the text to user input. Tough to execute on canvas with good, non-aliased results though. Best bet might be wiring up a spritesheet with every letter of the alphabet, then generating planes and painting correct sprite position tex on them...

Comments

  1. it looks really impressive

  2. This is amazing! Is there any way to change the image url or background color?

  3. Thanks James - yes there is. You can fork the pen and hack away all you'd like. On line 44 you can find the url for the smoke image. If you wanted to change the background color, you could do that by setting the renderer clear color, by adding something like the following on ine 19: renderer.setClearColor(0xff0000, 1). The first argument simply takes a hex color, and you can set it to whatever you'd like. Enjoy!

  4. Really awesome work. Thank you very much for the tips!

  5. This is one of the best looking smoke effects I have seen! I am totally going to have to fork this and mess around. Great stuff

  6. @teddarcuri - Thanks! Glad you like it :) Fork end enjoy!

  7. Found a handy script that will ensure your demo stays at the correct size and aspect ratio when the window is resized. Figured you may like to pop it into some of your demos possibly!

    http://learningthreejs.com/blog/2011/08/30/window-resize-for-your-demos/

  8. Amazing! ¿It's possible to set the background transparent?

  9. Hi, when I download the pen and try to open the page from the export file it does not work. The FPS works but the smoke does not show up. Could you help me figure out how I can get it to work?

  10. @webwomanofla Hi Brittany, If you downloaded the pen to another environment, it's likely that you're not able to access the graphic that acts as the smoke sprite from a server that's not codepen.io. Try downloading that graphic and saving it somewhere in your project directory, and changing the URL that references it in your local code. Let me know if you run into trouble.

  11. I am new to the 2d and 3d web world. Which would give better performance with more particles for this smoke effect? Three.js or Pixie.js? I ask since this can also be done in 2d.

  12. @dman777 - I suspect three.js, but you'd have to do performance testing for sure. MrDoob, the guy that made three also built a standalone performance indicator (that's the fps count you see top left) - which is why I suspect three would perform better. But the only way to be sure would be to build and test :)

  13. I've been hacking at this making trying to make pure white smoke... I guess you could say like pure white clouds. I tried a png with smoke that was more white. There is contradiction.... the opacity helps create the 3d depth, but then with opacity the smoke cloud will always start to darken. With a white background, it would not be much beneficial because then the clouds to not stick out as much. Thoughts on making pure white smoke/clouds?

  14. @dman777 - no need to change the PNG, we're actually not using it's color much :) we're tinting the smoke green with code. I'm on mobile or I'd provide you a line number. It's in there somewhere :) As for white smoke on a white background... Well, you're out of luck on that one. White isn't going to stand out well on white. Your options would be to make the background slightly grey or the smoke slightly grey. Even then, things would likely be low contrast. For white clouds... Blue sky? Let me know if you need more info :)

  15. @teolitto - this is amazing! Best smoke effect I've seen online.

    Is it possible to use it as a background? I've seen other smoke effects that place it inside a canvas tag and then set the style to position fixed.

  16. @jacksegal - thanks! Much appreciated! Yes, it would be possible to use this as a page background by setting the canvas position to fixed and giving it a low z-index. You'd very likely run into browser inconsistencies with that technique, but I suspect they could be surmounted. At that point though, you'd almost be better off using a video background (more performant), unless you really needed this to be dynamic/respond to user input. Hope that helps :)

  17. This is the most awesome looking smoke effect on internet! I really want to use it but when I'm exporting this as .zip and opening in browser it comes up with only a black screen and the fps on the top-left corner. That's it! Please bro help me out what to do..

  18. @telot thanks! It sounds like you're missing the file. If you look through the code, you'll see that somewhere in there is a reference to a smoke texture PNG. You'll need to download that and host it somewhere else and change the reference to the new URL. Let me know if you have trouble.

  19. This is really awsome! Thanks for this great effect. :) Maybe you can answer one question. Is it possible to change the size of the text to match the screen resolution of the device or even make the text responsive?

  20. @benjamin1983 - thanks! Glad you like it! You could make the text responsive, using one of a few different methods. Right now it's an image which is how I was able to get that smooth glow without doing too much work ;) There's definitely webgl stuff out there that can do a glow like that in code, or you could scale the image, or swap images at breakpoints. Lots of options!

  21. This is the most amazing smoke effect on the internet. Absolutely great work! Kudos!

    I'm running into an issue when trying to implement it. It pops up for a second then goes away and my Chrome inspector gives me a bunch of warnings. For each image (the smoke and the text), it says "THREE.WebGLRenderer: Texture is not power of two. Texture.minFilter should be set to THREE.NearestFilter or THREE.LinearFilter." It also says, "THREE.CubeGeometry has been renamed to THREE.BoxGeometry." and gives me 256 render warnings that say "RENDER WARNING: there is no texture bound to the unit 0".

    Any idea what could be going wrong here? I think what's really frustrating is the fact that it pops up for a split second, lol.

  22. @ashamun

    Howdy! Thanks for your kind words, that's much appreciated 😊. As for the challenges you're facing when trying to implement, the first thing that's coming to mind is version mismatch. I built this guy a good while ago, and good old three.js just keeps on evolving. I wouldn't be at all surprised if newer versions have tighter rules around textures etc. The first thing to check is to make sure your version of three matches the version I used in this pen. It's odd that it flashes for a moment though. Got a link?

  23. @teolitto

    Thanks for the quick reply! I'll certainly look into the version issue but I got the package from the pen so I'm assuming it would be the same. Unfortunately, I don't have a public link.

    I did manage to get it to work on a plain HTML file but when integrating into an existing WP site, for example, it won't work. That leads me to believe there is some conflict in the WP template being used. I'll def do some more digging.

  24. stunning effect, but where is HTML? I just do not understand how to add an effect to the site. Having given it a js file, I get a lot of errors in the style (not defined). How can this be fixed?

  25. Tj @digitaldude on

    @teolitto is there a way to keep the smoke from changing shape on refresh ? and position it inside the body?

  26. @digitaldude yep. Replace the code that randomly places the smoke with something that places the smoke either via manifest or procedurally :)

  27. @teolitto Love this Pen! I'm trying to add it to a revolution slider slide but no luck so far. I uploaded the smoke .png to my media library but when I add the code to the custom css and javascript sections it just comes up as black... Any ideas? Thanks!

  28. Hey @gcorodrigues having trouble getting replied to go through, but it may be a targeting issue. Any errors in console?

  29. @teolitto nope, everything went through all right. Tried everything and it just doesn't work for some reason!

  30. Email me a link if you want, I'll see what I can see.

  31. Awesome! is there a way to append smoke to div ID or class?

  32. Very creative way to make convincing looking smoke. I'm impressed!

  33. Rad smoke effect! I know this is an older pen but I am having a small issue with a reference error. Getting this error; Uncaught ReferenceError: Stats is not defined!

    Any ideas on how to fix that?

Leave a Comment Markdown supported. Click @usernames to add to comment.

You must be logged in to comment.
Loading...
Loading...