A New Wall

Last time, we destroyed the wall. This time, we rebuild it. I'm so glad I hired someone to rebuild the wall. I would have died or destroyed my wall had I done it myself. There were so many little things I would have never paid attention to had I tried to do it myself.

  1. If you destroy a wall, it's easy to move electrical outlets wherever you want. You can also remove electrical outlets.
  2. Each drywall piece can be textured to be flat or have some bumps. I just matched my current wall which has some texture, but I didn't think about it.
  3. Drywall has to be painted. Sounds stupid, but I didn't think about painting before. I thought you just throw up some wall.
  4. Since some portions of the wall are shorter than they were originally, some of the subfloor is exposed. Now I have to hire someone to rebuild and repair parts of the floor.
  5. Drywall also has to be finished so that paint can actually go on top of it. You can't just paint drywall.

Onto some pictures.

Roxul Safe n Sound added in between the studs.

Roxul Safe n Sound added in between the studs.

One Whisperclip Installed.

One Whisperclip Installed.

The Hat Channel Installed on the clips.

The Hat Channel Installed on the clips.

QuietPutty behind the electrical outlets. Interestingly, the neighbor had no electrical outlets on his side.

QuietPutty behind the electrical outlets. Interestingly, the neighbor had no electrical outlets on his side.

One layer of drywall up.

One layer of drywall up.

Two Layers of drywall up with green glue. The red lines are where the hat channels were. We missed a couple of times.

Two Layers of drywall up with green glue. The red lines are where the hat channels were. We missed a couple of times.

Drywall textured and finished. Now ready to paint.

Drywall textured and finished. Now ready to paint.

Wow. Such Checkerboard

Since Async Pan and Zoom (APZ) has landed on Firefox OS, scrolling is now decoupled from the painting of the app we're scrolling. Because of the decoupling, when the CPU is under heavy load, we sometimes checkerboard. What do the past two sentences mean and how do we fix it? Stay with me here as we go down the rabbit hole.

What is Checkerboarding?

Checkerboarding occurs when Gecko is unable to paint the viewable portion of a webpage while we're scrolling. Instead, we just paint a color instead of the content. Visually this means we get something like this:

The blank white space at the bottom underneath 'David Ruffin' is checkerboarding.

The blank white space at the bottom underneath 'David Ruffin' is checkerboarding.

Why does this happen?

Async Pan and Zoom

Asynchronous Pan and Zoom (APZ) is a major new feature in Firefox OS that improves scrolling, panning, and zooming. Before APZ, scrolling was a synchronous affair. Every time a user touched the screen to scroll, an event would be sent to the browser essentially saying 'scroll by X amount'. Nothing else in the system could occur while the CPU painted in the newly scrolled in region. If the CPU was busy doing something else, you couldn't scroll until the CPU caught up or it would be janky.

APZ changes that by using a separate Compositor thread. Every time a user touches the screen, an event is fired off to the Compositor thread that says 'scroll by X amount'. The compositor thread is then free to scroll by X amount without being blocked by other work. For this to work smoothly, the graphics system has to overpaint what the user is currently seeing. The idea is that the user can scroll around a displayport that is larger than what the user is currently seeing (the viewport). When the user scrolls near the edge of the displayport, we can repaint the displayport again and the user scrolls as they wish. The painting of the displayport occurs on the main thread, but the scrolling occurs on the Compositor thread. Thus, we should be able to have smoother scrolling. It's all kind of difficult to explain in text, so let's checkout this video:

What we see is how the graphics subsystem works when we're scrolling. The initial 'red' box we see is the current viewport, or what the user is seeing. The darker brown box is the whole webpage. As we scroll, we see a yellow box, which is the 'requested' displayport. This is a request to the graphics system to render and paint that portion of the webpage. Finally, the green box displays what we've actually painted. As we scroll, we see that we're constantly requesting new display ports (yellow boxes), and we're flashing green as we paint in new displayports. These displayports should always be following the viewport and in theory, the viewport always fits into the green box. When they don't, we get sadface or checkerboarding. This occurs around frame ~440 (top left number) where the top of the red box is just slightly outside the green box. Not quite the best visual appearance ever is it? Finally, we know what checkboarding is and why it happens. How do we fix it?

fixCheckerboarding.jpg

The Graphics Pipeline

Figuring out how to fix something requires an understanding of what's actually happening. Your HTML page goes through these following steps:

  1.  Parsed HTML into a Content Tree - Mostly a 1:1 representation of your document
  2. Content Tree is translated into rectangles creating the Frame Tree
  3. Each node in the Frame Tree is assigned a Layer, creating a Layer Tree
  4. The Layer Tree is painted. The content is sent to the Compositor in another thread
  5. The Compositor renders each layer to create a single image you see on the screen.

Steps (1) and (2) occur the first time the page is loaded. Steps 3-5 occur at every single frame. If you want smooth scrolling, we paint 60 frames per second, which means we might have to do steps 3-5 every 16.6 ms consistently. When we checkerboard, it means we're not doing steps 3-5 within our 16.6 ms time frame. Since steps 1 and 2 occur only once, if we want to optimize smooth scrolling, we have to optimize steps 3-5. As with compilers, optimizing early in the pipeline usually produces a much better performance optimization than optimizing at the end of the pipeline. For example, the compositor's job is to go through each layer and draw pixels. If we can optimize a layer, the compositor doesn't have to do any work. The main way to optimize checkerboarding and smooth scrolling is to optimize the layer tree. If we optimize a layer in the layer tree, we don't have to paint anything in the main thread, we send less data over IPC to the compositor thread, and the Compositor has to do less work. Now, what is a Layer? What's a Layer Tree. And what is ???? before we Profit!

Layerize All the Things!

Every node in the Frame tree is assigned to a Layer. There are different layers for different types of content, such as an image, a video, a scrollable layer, etc. All the Layers make up the Layer Tree. The idea of a layer comes from painting by hand, where oil painters used layers for different elements in their paintings. The decision to assign content to which layer occurs in nsFrame::BuildDisplayList. At each frame, Gecko decides to invalidate certain parts of the Layer Tree and assigns those elements to a new layer. What does a Layer Tree look like?

layerTree.png

We see that there are a ton of different types of Layers, but there are a few that stand out.

  1. The RefLayer - This is the layer that contains the content app or child process. Everything below it belongs to the content. Everything above it refers to the parent.
  2. ContainerLayers - These layers just contain other layers. Sometimes these are Scrollable layers, as identified by a ScrollID.
  3. ThebesLayers - Layers that have an allocated buffer that we can draw to. We mostly want to optimize these!
  4. ColorLayers - Blank layers made of a single color (usually specified with the CSS property background-color).

To see a text dump of a Layer Tree, enable the layers.dump preference or in the developer menu in Gaia. Our job to reduce checkerboarding is to make sure we both (1) Layerize Correctly and (2) Make as few changes to the Layer Tree as possible at each frame. How do we know when we're doing (1) or (2)?

Layerizing Correctly

There are a few things to check to see if an app is layerizing correctly. The are generally just alerts to see if we're doing ok. The first is to enable the FPS counter in the developer tools. The right most number on the display will tell us how many times we're overdrawing each pixel. In the ideal world, we would draw each pixel only once, so the number would be 100. If the number is 200, it means we're drawing each pixel twice. While you're scrolling, if the number is ~300 - ~400 for an app, we're probably doing alright. Anything over ~500 should be an alarm that we're not layering correctly.

The other option is to enable Draw Layers Borders. If we have a lot of random layers all over the place while we're scrolling, or if the layer's don't make any sense, we're buildings bad layers. Here's an old example from the Settings app where we were layerizing pretty badly. See the random green boxes around sound? Bad.

Over Invalidation

The next thing to check is to see if the app is over invalidating the layer tree. In those cases, we'll be painting something every frame when we don't have to. For example, if a piece of content is a static block with some text that never changed, it's useless work to keep painting the same text. You can check to see if your app is over painting by enabling the 'Flash Repainted Area' option. Generally, unless it's changing, it shouldn't be flashing. In addition, with APZ, when we're scrolling, only the newly scrolled in content should maybe be flashing. If everything is flashing all the time, check your app. Some good examples on over invalidation are over here.

You should check that we're both layerizing correctly and not over invalidating the app. If both look good, you might have to read a layer tree.

Reading a Layer Tree

Reading the Layer Tree is a very dense and time consuming process, especially at the beginning. Skip this if you're busy and just want to fix your app quickly. Otherwise, grab some coffee and join me for a rabbit hole. Here is an example Layer Tree from the Settings App that helped with bug 976299.

Essentially what we're looking for is a Layer that is either (a) unused (b) not visible or (c) not the right dimensions. The key things to look for are the visible sections. These dimensions are in pixel units. On this device, we're looking at a width=320px, height=480px screen. Thus anything that isn't actually visible to your eyes shouldn't be in a layer if we're optimizing it correctly. Let's take this layer tree line by line.

  1. Layer Manager - Every Layer tree is managed by a Layer manager. Can't do anything here.
  2. Because we haven't seen a RefLayer yet (line 14), we're now in the parent process. We have a ContainerLayer that is dimensions width=320, height=480, starting at coordinate x=0, y=0 (the top left corner). X is the horizontal axis. Y is the vertical axis. We see this in the [visible=< (x=0, y=0, w=320, h=480); >] portion.
  3. We have a ThebesLayer, with x=0, y=0, w=0, h=0, and it is not visible. Ideally, we wouldn't have a Thebes Layer here, but since it has no dimensions and is not visible, we're good to go.
  4. Empty Space
  5. We have a ColorLayer. ColorLayers are a single background color layer. Here in this case it is a black background rgba=(0,0,0,1), the 1 here means opacity so it's opaque. It's also not visible, so we're good to go. Opaque is good because it means anything behind this layer isn't going to be visible, so we don't have to paint the items behind it.
  6. Another ContainerLayer that has the same dimensions. Since the layer in line (2) is just a non-visible rectangle, it's ok to have this one.
  7.  We have a ThebesLayer that is width=320, height=20px located at (0, 0). Since this is in the parent process, this is the status bar that tells you how much battery you have, etc.
  8. Every Thebes layer has some buffer attached to it to actually draw the data. The ContentHost tells us it has a buffer of size width=320, height=32, located at (0, 0). In the ideal world, the buffer size would be height=20, but 32 works because of the GPU.
  9. The ContentHost has a gralloced buffer that we're painting with OpenGL. Usually, for every ThebesLayer, you should see both a ContentHost (8) and a Gralloced Buffer (9).
  10. Another Container Layer! This time located at (0, 20) (so vertically down 20 pixels, visually 20 pixels from the very top or just below the status bar), a size width=320, height=460. The height here is 460 because 480px total screen size - 20 pixels for the status bar.
  11. Another Thebes layer, not visible so we're ok.
  12. Empty
  13. A Color Layer that is the whole container layer (10). Color Layers are cheap, so it's ok. In the ideal world, we'd get rid of this too. But the important part of the Container Layer is line 14!
  14. RefLayer - This marks the beginning of the Content App, or the Settings App here. We see it starts at coordinate (0, 20), is 320x460.
  15. The Container Layer here starts at coordinate (0, 0), width=640, height=460. A few things to note here, since the ContainerLayer is inside the RefLayer, the (0, 0) is from the top left of the ContainerLayer in (10). That means, from the point of view of the whole screen, it's actually at (0, 20), width=640, height=460. In addition, it has a DisplayPort of size 640x460, which is the displayport associated with Async Pan and Zoom. Since our screen size is only width=320, we're allocating twice as much size as we need to. ALERT SHOULD BE GOING OFF HERE!
  16. We have a ThebesLayer that starts at x=320, y=0 (again, from the point of view of the ContainerLayer defined in (line 10)), so it's actually at coordinate (320, 20). The width=320, height=460. Essentially, we're having a layer that is horizontally shifted by 320 pixels. But our screen is only 320x480. We have a layer for something off screen! ALERT! See bug 976299.
  17. A Content Host for the Thebes Layer in 16, again at position (320, 0).
  18. The buffer for the Content Host and Thebes Layer.
  19. Another Container Layer! Yay! This time at (0, 0), width=320, height=460. This Layer is for the word 'Settings' and might be too big.
  20. Another ThebesLayer, (0, 0) 320x460. Again in reality, it's at (0, 20), but because it's inside line 10, it's from the point of view of shifted down 20 pixels.
  21. Another Content Host.
  22. Another buffer for the Thebes Layer in line 20.
  23. Another Container Layer. However, this is the layer we're actually scrolling. First, we see that it has dimensions (0, 50) width=320, height=1435. Why is it height=50? What's at (0, 0) in the Settings app? Oh, the word 'Settings'! Thus the layer at line 19 contains the word 'Settings'. This layer at line 23, is the scrollable area of the Settings App. The height=1435 is because of APZ. Remember the displayport being bigger than the viewport? Here's how big the displayport is! 1435 pixels. We see that this height=1435 matches the displayport size [displayport=(x=0.000000, y=0.000000, w=320.000000, h=1435.000000)].
  24. A Thebes Layer for the whole displayport, hence 320x1435 size. We also see again that the starting coordinate is (0 ,0), which is again relative to the ContainerLayer in line 23. So (0, 0), means the top left of the ContainerLayer in line 23, or in overall coordinate space (0, 70). 20 from the status bar plus 50 from the word 'Settings'.
  25. A ContentHost for the ThebesLayer in line 24. The same size.
  26. A buffer for the ContentHost for the ThebesLayer in 24.

Whew. Thus when we're optimizing the Layer Tree, we're looking for items that are allocated a layer when they shouldn't be or wrong sized layers. One thing to note here is that every layer here is Opaque. If it is transparent, we'll see [component-alpha] instead of [OpaqueContent]. Opaque content is great because we don't have to paint any items behind the opaque content. If you were wondering why we were adding a bunch of background-colors into Gaia, this is it. Whew, so that's line by line on how to read a layer tree. Essentially, if you see a layer but don't see it on the screen, we can optimize a bit more. Every time we eliminate a Layer, it helps the compositor at every single frame, or every 16.6ms.

Are We There Yet?

In theory, if we fix everything, and we're not doing any other work while scrolling, we should not checkerboard. We've made a lot of progress in many of the apps. You can find the mother bug in bug 942750. Until then:

ending.jpg

Special thanks to the Graphics, Firefox OS Performance, and Gaia teams for their hard work at fixing the problem. Special shout out to BenWa, Ben Kelly, and Vivien for their help.

Demolition of a Wall

I finally got time to find a contractor who would demolish a wall and install a new soundproofed wall. Interestingly, the previous owners actually had not 1, but 4 layers of drywall. Between each layer was nothing like Green Glue or any compound, just an extra layer of drywall with some sound board. In addition, there was already R-13 Fiberglass insulation. Four layers of drywall, a layer of sound board, R-13 insulation, and nothing in between the drywall still sounded terrible. Who knew! In case you're bored and never saw a wall destroyed, (like me!), it's a pretty interesting look into how buildings are made.

Part 1 of the top most layer down. The brown stuff is 'sound board'. Note to all, sound board sucks.

Part 1 of the top most layer down. The brown stuff is 'sound board'. Note to all, sound board sucks.

Oh hello insulation... and what is that weird yellow stuff? Looks like the previous builder used window sealant...

Oh hello insulation... and what is that weird yellow stuff? Looks like the previous builder used window sealant...

More soundboard. One layer of drywall and soundboard gone from the sides.

More soundboard. One layer of drywall and soundboard gone from the sides.

One layer all cleaned up.

One layer all cleaned up.

Removing all the supports for the first two layers. Onto the last two layers. One layer of plaster with one layer of drywall.

Removing all the supports for the first two layers. Onto the last two layers. One layer of plaster with one layer of drywall.

Weird gunk over the electrical outlet. Who knew the hung from the ceiling in residential buildings. And more gunk!

Weird gunk over the electrical outlet. Who knew the hung from the ceiling in residential buildings. And more gunk!

Finally tore down the drywall and plaster on one layer. We see the exposed studs and the insulation.

Finally tore down the drywall and plaster on one layer. We see the exposed studs and the insulation.

The studs clearly exposed with no insulation. Now we're ready to build a new wall.

The studs clearly exposed with no insulation. Now we're ready to build a new wall.

So much trash. So much trash.

So much trash. So much trash.

Soon, a new sound proofed wall.. soon.

Loud Neighbor == Moar Sound Insulation

Earlier this year, I moved into a condo. Little did I know how much noise my neighbors would make or how little sound insulation there is in the wall. Note to Realtors, how come nobody ever advertises that they have sound insulation in the walls? Systematically, nobody lists that information. I could understand if there was no insulation and the Realtor says nothing, but if the house did have good sound insulation, I'd expect that to be advertised like crazy. Alas, after asking my neighbor to be quiet, which to his credit, he's done quite a bit, I can only do much before the only solution is to add sound insulation. Off to another home improvement adventure.

After hours and hours of Googling, forum reading, sound insulation measurements and reviews, there is very little that can be done to an existing wall to improve sound insulation qualities. If you have a wall without insulation between you and your neighbor, the only good effective option is to tear down one wall and start from scratch. The kicker is that buying a new wall is very expensive. Why it is so expensive and how much sound reduction you need required quite a bit of researching.

Sound is measured in Decibels (dB) and is a logarithmic unit. That means, going from 10dB noise to 20dB noise actually means that 20 dB is 10x louder than 10dB. To give you a sense of how loud things are, check out this chart over at Industrial Noise Control.

What we see is that in a normal living room situation, you're looking at noise on the other side of the wall ranging from 50 dB - 90 dB if your neighbor plays loud music. What you want, is to have your apartment be quiet, which means that the ambient noise should be roughly 40dB if possible. Taken to the extreme, if your neighbor makes noise at 90 dB, and you want it quiet on your side of the wall, you need a noise reduction of 50 dB (90 dB source - 50 dB reduction) = 40 dB ambient noise. This measurement, the reduction in decibels is called the Sound Transmission Class (STC).

Most noise reduction products for home instruction are measured in STC. This is a laboratory measurement where a speaker is put on one side of a material and a microphone is put on the other side of the material. The measured reduction in decibels is the STC rating of a material. Standard drywall, which is what you think of when you see a wall, has a measured STC rating of ~33 STC, which is almost nothing. This is what people call 'paper thin' walls and you can still hear your neighbors talking.

STC ratings are also not linear, as in having one layer of drywall rated at STC 30 and adding another layer of drywall does not equate to an STC rating of 60. It may only improve STC ratings by 2-3 points. In addition, sound is like water and doesn't only travel through the wall. It can travel around the wall, through the floor, through the window, etc. Real life STC ratings (in the field), are usually 10-15 points lower than the rated material. The question then is, if we want a quiet place and we know we need an STC rating of 50, how do we get there?

Normal walls have an STC of 25 in the field. Multi-unit buildings usually by law, have to have a minimum of 50 STC materials between the walls. Luxury hotels and luxury multi-family units have STC ratings of 60+. They have sound insulation in mind and build concrete in between walls, which is an excellent sound blocking material. Dedicated home theaters, where I actually found most of the best information on sound insulation, try to get STC ratings of 60+.

There is a large problem with STC ratings though, in that they are the average of 16 frequencies of sound. The frequency of sound is defined in Hertz (Hz). If you go back to physics class, sound is a wave. Frequency is how often the wave's curve repeats every second. 1 Hz means a wave oscillates every second. 5000 Hz means a wave oscillates 5000 times. Higher frequency noises are usually higher pitched (someone screaming) and low frequency noises are lower such as bass from music. Almost everything I've read says that dealing with the high end frequencies is rather easy. Dealing with bass is the problem. My problem is that my neighbor has lots of bass, FML.

STC ratings only measure the sound reduction capabilities from 125 Hz to 4000 Hz, which covers most talking and other living noises. Subwoofers from sound systems usually have a range of 20 Hz - 200 Hz. THX certified sound systems must be able to produce frequencies as low as 80 Hz. Klipsch Promedia 2.1 subwoofers have a rating of 20 HZ - 200 HZ. Eliminating low bass is really hard. One should take this into account when looking at the STC rating of different materials or expectations such as this chart:

In the end, to get a really high quality sound insulation system, we need a high STC rating wall that can also block low frequencies. An STC rating of 50+ is probably the minimum someone needs to get 'good' sound insulation and 60+ to get 'great' sound insulation. Second, the system has to be designed to cover low frequencies, preferably as close to 0 Hz coverage as possible. Thus, when digging into materials testing, looking at the data of how it performs over a variety of spectrum is more important than the single STC number. Sometimes, you'll see the Outdoor-Indoor Transmission Class, which measures lower frequencies down to 80Hz, but that is more rare. Now that we have the requirements, how can we build this and what materials do we need?

Sound Insulation 101

Like all systems, the best built system fully understands what it's trying to solve. What we're trying to eliminate here is sound at all frequencies, but different materials block different sounds at different frequencies. Sound is a wave, that once it hits a material, turns into a vibration, then becomes a wave once it hits air again. The key thing is to lose as much energy while the sound is vibration as possible. Thus, mass is key when eliminating noise. The more mass a material has, the harder it is to make the whole material vibrate, and the better the sound insulation. In addition, transforming between air and a vibration forces the wave to lose energy, which blocks more sound. This is the general strategy sound insulation will take: adding mass and transforming vibration into air and back again.

However, like all waves, we also have to worry about resonance frequencies. Resonance frequency is the frequency at which a wave's amplitude actually increases because two waves join together. Destructive interference, is the opposite of resonance frequency, and what active noise cancellation does. If you build a system, and the neighbor's noise is actually at the resonance frequency of the materials, we actually get worst sound insulation. This usually only occurs at lower frequencies, which makes eliminating bass even harder.

So now that we know how to measure sound, we know what sound is, how do we build a system that can stop 90 decibel sounds? Specifically, how can we get a system that is STC 50+ in the field without concrete as most buildings can't handle that weight? First, we have to figure out how walls are built.

A Standard Wall

A standard shared wall in a condo contains 2'X4's (studs, or 2 feet by 4 feet) or wood posts spaced either 16' or 24' apart. 16' spacing between each 2x4 is used if the wall is load bearing and holds up the structure. 24' Spacing is used if it is not load bearing. Incidentally, for noise insulation, 24' spacing is better, but I can't rebuild the whole structure and the standard is 16' spacing. This choice probably isn't up to you unless you're building a place from scratch. In many of the data reports for STC ratings on materials, you'll see something like: 16' or 24' o/c. The 24' o/c means 24 feet On Center, or spacing between the 2x4s. Between any wall, you'll have these 2x4s spaced evenly before anything is actually done on either side of the wall.

On each side, what cheap developers use is just a standard 5/8" drywall, or gypsum board, screwed into the 2x4. The 5/8" refers to the thickness of the drywall. In many construction forums, you'll see drywall called gypsum. For the cheapest possible wall, what you'll get is one 5/8" drywall on each side, and 2x4 in between with 16" spacing apart. This is the paper thin wall, with an STC rating of probably around 25 that you get in cheap construction. You'll notice that there is nothing in between the drywall other than the wood posts, no insulation at all. At an STC rating of 25, someone yelling (70 DB), will sound like (70 - 25 = 45), which sounds about like a normal conversation to you. You will be on the verge of understanding what they are yelling about. Even newer materials are available from home depot, with 1/2" instead of 5/8" thick drywall, which I'm sure sucks even more. In many data sheets, you'll see a wall construction described as something like:

5/8" Drywall
Wood 2' x 4' Studs w/ 16' o/c
5/8" Drywall

Which means one wall is 5/8" thick drywall, then 2x4 wood studs spaced 16' apart, and another 5/8" Drywall on the other side. Here is the same wall in picture form:

A Standard Wall - Two layers of Drywall and Nothing Inside

A Standard Wall - Two layers of Drywall and Nothing Inside

Now we know what a basic terrible wall looks and sounds like, how do we make this better?

Principles of Sound Insulation

In order to tackle sound, we need to work on the 4 elements of sound proofing:

1) Decoupling - Reduce the vibration transmitted between walls.
2) Absorption - Have the air work through something between the two walls.
3) Add Mass - Make the vibrations in the wall lose more energy.
4) Damping - Make only parts of a material vibrate.

We'll take each one head on and try to relate it to the principles of sound waves.

Decoupling

Everything I've read says decoupling is the single most important and effective improvement you can do to improve sound insulation. As sound goes from one wall to another, it acts like water. It finds the path of least resistance. Sound travels from the air, turns into a vibration in one wall, stays a vibration through the 2x4, and converts out to waves through the other wall. Thus, even if you just add insulation between the 2x4, it does very little because the vibrations just ignore the insulation and transmit via vibration. Decoupling fixes this problem my inserting a space between the 2x4 and your wall. Thus, the sound from one side has to turn into a vibration, losing energy, travel through the 2x4, translate back to waves (lose energy), convert back into vibrations when it hits another wall, then translate back out to waves (lose energy).

There are a couple of waves to decouple your wall, depending on cost and existing infrastructure. The best way and what they do in new good construction, is called double stud. The wall is two rows of 2x4s physically separated. Thus, the two walls never touch each other and the sound has no way to stay a vibration when transmitted through the wall. Here is what a double stud wall looks like:

A Double Stud Wall, the best decoupling strategy if you haven't built your wall yet.

A Double Stud Wall, the best decoupling strategy if you haven't built your wall yet.

If that costs too much, you can go with a staggered stud installation, which is where each post is no longer in parallel, but staggered. Each post is on a different foundational board. Each layer of the wall is on a different set of studs, so vibration is also difficult to transmit and the sound must convert back out to air before converting back to a vibration. Here is what a staggered stud wall looks like:

A Staggered Stud assembly, pretty good choice.

A Staggered Stud assembly, pretty good choice.

However, since my condo is already built and I can't tear down the neighbors wall, only my own, this doesn't work either. Thus, the only way to decouple the walls is what's called a resilient channel. Up until the 1980s or so, resilient channels were the best way to get sound insulation in luxury apartments. The prices have come down a bit so it's possible to use them today if you can't do a double stud or staggered stud installation.

A resilient channel is a metal bar. Each metal bar is installed horizontally along the wall. Each metal bar is screwed into the 2x4. Then your drywall gets screwed into the metal bar. Now your wall is decoupled from the other side as they do not share the same 2x4. In addition, the resilient channel can flex, which means the vibration energy is lost as sound travels through the resilient channel to your wall. The best metaphor I found was imagine sound being like a baseball. If you throw the ball at concrete, it bounces right back without a large loss of energy. If you throw a baseball at a hanging curtain, the curtain moves a bit, and the baseball just falls to the floor. The resilient channels are like the hanging curtain that absorb the vibrations by slightly moving.

The biggest problem with resilient channels, is that if the contractor installs a resilient channel incorrectly and screws the drywall into a 2x4 instead of the resilient channel, you lose large amounts of sound insulation and gain almost no sound improvement. This problem is called a short circuit.

There have been improvements to solve the short circuit problem. You can install clips, which cannot be drilled through, into the 2x4. The metal bar, which is called a hat channel, is then installed onto the clips. Now it is more difficult to directly drill a hole through the drywall, through the hat channel, and into the 2x4. Incidentally, these clips also improve sound insulation because there is another decoupling between the 2x4 and the hat channel. The best version I've found have been whisper clips. Here's what a final version of clips with a hat channel looks like:

A wall with whisper clips and a hat channel instead of resilient channels.

A wall with whisper clips and a hat channel instead of resilient channels.

For step 1, our decoupling mechanism is to use whisper clips, with hat channels. From what I've seen online, there is a murky definition between resilient channel and resilient clips / hat channels, but they are essentially the same thing. The only difference is whether or not you want to use clips versus screwing in the metal bar across the 2x4s. Resilient channel / clipped walls with just 5/8" drywall can bump the STC of a wall, assuming proper installation, up to 55 STC. Here is a video of a resilient channel on a ceiling:

Since this a condo with a shared wall, I can only modify my side of the wall. Ideally, we'd be able to do this to both sides of the wall, but that's not the case here. For now, everything will just be based on my side of the wall. The other wall will be left alone with a 5/8" drywall. In the best case scenario, sound insulation would be installed on both sides of the wall.

Absorption

Some contractors or online communities just say they have no insulation and that's why their walls are paper thin. Insulation is the empty space between 2x4s. The problem is that the main culprit in sound is vibration, not insulation. Just adding insulation does very little. In addition, insulation's main purpose is heat retention, not sound elimination. However, once you decouple your walls, insulation greatly helps because the sound must travel through the insulation between the decoupled walls, instead of passing directly through the 2x4s as a vibration. Standard insulation is Fiberglass. The way fiberglass is rated is usually on thermal properties, noted as the R-Value, rather than sound insulation. The higher the R value, the better the thermal insulation. In many cases, what you'll see is R13 or R19 fiberglass insulation, which is fairly easy to get at Home Depot. Not much to say here other than, by the time you tear down your wall, insulation is super cheap.

I haven't found much in terms of better sound insulation that actually works better than Fiberglass. Some install cellulose, but most people I see just install fiberglass. Some have recommended Roxul Safe n Sound, but it has no thermal insulation properties. I think, if you're going for maximum noise isolation, Safe n Sound is the way to go. Our wall with Safe n Sound insulation looks like:

A wall with insulation, what people think of when they think "stuff is inside the wall".

A wall with insulation, what people think of when they think "stuff is inside the wall".

Adding Mass

To sound insulate at the low frequencies, you need mass. The more mass the better. The reason mass works is because sound becomes vibrations and a lot more energy is required vibrate a whole board of concrete versus a board of cardboard. That's why luxury hotels with walls made out of concrete work so well: it's so heavy. Standard residential drywall comes in 1/2" or 5/8" thick pieces. There is even ultra light weight 1/2" drywall, which is probably terrible for sound proofing. Some materials manufacturers have specifically engineered materials that are a heavy replacement to drywall, such as QuietRock. QuietRock is actually a replacement drywall that is constructed of different layers of materials to include mass, as well as a compound in between the layers of material that absorbs vibrations and turns it into heat. QuietRock is quite popular in some home insulation shows because it is easy to install. With basic QuietRock on one side, you can get an STC rating of up to 49. The compound between the layers actually leads us to the final principle of sound proofing: damping.

Damping

Damping is the process of converting vibration energy into heat energy as a material vibrates. This reduces the amount of energy that is detectable by humans as there is less energy for sound, thereby reducing noise. Green Glue is the most popular damping material and if there is any undisputed sound proofing product, Green Glue seems to be the best. The way Green Glue works is first you have one layer of drywall attached to the 2x4 studs. You put green glue on the back of another piece of drywall and mount that on top of the first piece of drywall, creating two layers of drywall with Green Glue in between. Actually, materials like QuietRock are essentially a single engineered piece of drywall with something like Green Glue already pre-made. Green Glue STC Tests show that it works quite well. Our wall with Green Glue looks like:

A layer of Green Glue between two layers of drywall on one side of the wall. A pretty good damping material.

A layer of Green Glue between two layers of drywall on one side of the wall. A pretty good damping material.

The inevitable question comes up, should I get two layers of drywall and Green Glue in between or a single piece such as QuietRock?

From what I've read, the performance of eliminating high frequencies of both materials are equivalent, but the low frequencies are where two layers of drywall and Green Glue wins. The reason is that mass is the most effective tool against low frequencies and QuietRock just isn't quite as heavy as two layers of 5/8" drywall. The other problem occurs because of resonance frequencies, which I spoke about earlier but can finally get into.

For many materials, if you take a graph of the frequency vs decibel reduction, you see a dip around the low frequencies:

For many materials, the low frequencies hit the resonance frequency of the material, which means that the material actually vibrates with the incoming sound, producing worst performance and annoying you more. To lower the resonance frequency, you need to add more mass. Lowering the resonance frequency essentially shifts the performance curve left, so lower and lower frequencies are required to induce resonance. This is also the reason two layers of drywall and Green Glue outperform QuietRock at the lowest frequencies: it just adds more mass and shifts the resonance frequency lower. Ignoring only 40 Hz and below frequencies are a lot better than ignoring 80 Hz frequencies and below. You double the range of blocked frequencies!

Sound Redirection

As a side note, if you start researching sound insulation, you'll invariably come across egg cartons, foam, and hanging tiles. These materials are used for sound redirection, not sound blocking. They are used in recording studios and places where you want sound bouncing back at a certain angle. They keep the sound IN, not keep the sound out which is what you want in your home. If you had access to the noise source, these materials would help, but unfortunately we don't control that and so I didn't dig much into those materials.

Installation Considerations

Now that we know what we want, two layers of drywall, green glue in between the layers of drywall, Roxul Safe n Sound insulation, and whisper clips with a hat channel, are we all done? Almost! There are only two installation notes left. First is that sound is like water and will find the path of least resistance to cross a wall. Any holes will become flooded with sound, making the whole sound reduction useless. Many holes are in the wall that are actually required such as electrical outlets and ethernet ports. To stop sound from being transmitted through these holes, you can install QuietPutty behind the boxes holding the plugs, which stops sound from being transmitted through. I'm not quite sure yet if I need them on both my wall and the neighbor's wall, but I'll probably do both just to be sure.

Finally, the last piece is the noise paths between drywall and existing walls. Since the walls go up next to each other, there is a small open slit between the pieces drywall. These can be sealed up with acoustic caulking such as Green Glue Noise Sealant. This sealant goes between drywall slabs, beneath and over the drywall as it touches the floor/ceiling, and on the sides where your wall meets another wall.

Downside Risk

Like all good things, it must come at a cost, and at a cost does it come. Now I understand why cheap builders just throw up a slab of 5/8" drywall without insulation. The cost to install one 4'x8' piece of drywall costs $8. For our solution, of two layers of drywall, whisper clips, hat channels, Green Glue, and Safe n Sound, costs ~$80 for one 4'x8' piece. That is eight times the cost. For my two bedroom condo, doing three walls, requires 12 pieces minimum of drywall, for a total of only $96. For a sound insulated wall, it will cost $980, just in materials. The amount of time is probably 2-3x to install as well.

In addition, a single 5/8" drywall only takes up 5/8" of space along a single wall. If you dual layer drywall, plus green glue, plus a 7/8" hat channel, the whole installation takes up 2.125 inches of space. Along the whole wall, you're losing 1.5" of depth, which actually means your sellable square footage goes down, bad for a home builder trying to make money. This is another reason QuietRock exists. You get roughly the same performance except at the lower frequencies without the extra space. That's also why it's more expensive than the dual drywall / Green Glue solution.

There is also no guarantee that this will actually work unless you remodel the whole room. At the moment, I'm only going to attack the main common walls, but then the vibration and sound might travel through the floor or the ceiling. This is called Flanking. How big of a problem is this is difficult to say. The hardest problem is the human brain because sounds which were once undetected due to louder noises might now become an issue.

Finally, the last two issues are the triple leaf effect and hanging items. The triple leaf effect is the case where you have three walls instead of just two between two units. One would think more mass, more air, more energy dissipated == good! The problem with three walls is that the resonance frequency actually increases over two walls, producing worse results, especially at lower frequencies. Second, hanging items on walls that have good sound insulation is a big no no. On resilient channels, this becomes a short circuit. Hanging an item on the wall or inserting a nail into one essentially opens up a new hole for sound to travel through, basically skipping the sound blocking of the wall. How big of a deal is a single nail in a sound insulated wall is still difficult to say.

The Soundproof Wall

What I hope to install is this final configuration:

5/8" drywall - Neighbor
16' o/c Studs
Roxul Safe n Sound Insulation
Whisper Clips + Hat Channel
5/8" drywall
Green Glue
5/8" drywall - Me

The hopefully final construction. Whisper Clips, Hat Channels, Roxul Safe n Sound insulation, A layer of drywall, Green Glue, and another layer of drywall.

The hopefully final construction. Whisper Clips, Hat Channels, Roxul Safe n Sound insulation, A layer of drywall, Green Glue, and another layer of drywall.

I haven't been able to find lab tests in this exact configuration. The closest I've gotten to is just Resilient Clips with two layers of drywall on both sides, Roxul Safe n Sound insulation in between, resulting in an STC performance of 55. The Green Glue should help at lower frequencies and help recover STC ratings from short circuits in the installation, bumping up the STC rating 2-3 points. Whisper clips bumps up STC up to possibly 60. The target STC rating of this installation should be high 50s, with a reality STC rating of probably high 40s. The OITC rating will, which targets low frequencies such as bass will increase from high 20s to high 30s / low 40s. Here's a video on how much work is involved to tear down drywall, install QuietRock, and put everything back together. I think the best part of the video is just seeing how everything should work and look when you tear down a wall.

I don't know if this will actually work and I'll be able to sleep, but if this doesn't work, time to move.

The will-animate CSS Property

Update: will-animate has been renamed to will-change.

Benoit Girard has been hard at work on adding a 'will-animate' CSS property to gecko in bug 940842. Will-animate hints to the browser that some section of the webpage will animate, and thus the browser can take advantage of that knowledge and optimize the web page's smoothness. What exactly does that mean and why do we need it? There's a lot of background information required to understand what's going on in the gecko browser, so the tl;dr - A replacement for 'translateZ(0px);' that will optimize the animation you need rather than optimizing a translation.

Will-animate is a high level hint that the browsers can use to trigger optimizations for some portions of a page. For example, it can be used tell the browser that some elements will animate on a scroll or animate in general. Currently, browsers have to use heuristics to determine which elements will potentially animate, which may not always be most optimal. At the moment, it's only a high level hint and isn't a guarantee that the browser will optimize the case. It's going to be up to each browser vendor to decide how to use the property. For now, there's a prototype implementation in Gecko, so let's see what gets optimized in Gecko.

A browser does a ton of work to display a website. The software pipeline from your HTML to a pixel is long and complicated. First, the HTML gets parsed into a Content Tree. This Content Tree essentially represents the same thing as the HTML on the web page. Next, the Content Tree is converted into a Frame Tree, which represents mostly the same thing as the Content Tree, but nodes represent rectangles that are paintable. Next, we enter the Painting phase, which takes as input the Frame Tree and issues drawing commands to create a painted Layer Tree. Finally the Compositor finishes by flattening the painted Layer Tree and issues drawing commands to the GPU to create a single picture on the screen.

The Painting phase is made up of two steps: 1) Build a Layer Tree and 2) Rasterize the layers. Building a layer tree involves analyzing the Frame Tree and deciding which nodes from the Frame Tree go into which layers, creating a Layer Tree. You can think of a layer as a blank piece of paper that needs to be drawn on. Different elements of the Frame Tree are put into different layers depending on some heuristics, but the overall goal is to minimize invalidating parts of a webpage and to only have to redraw as little of the webpage as possible at each frame. Rasterizing involves issuing drawing commands to draw each layer, for example draw a line. Once each layer has finished drawing, we've finished painting the current frame and we hand off the painted Layer Tree to the Compositor. Will-animate helps with both building the Layer Tree and rasterizing the layers.

First we'll start off with how it helps with creating the Layer Tree. Most simple text web pages are a single layer, so the Layer Tree is rather simple. You can see which parts of a web page are layers by enabling the preference 'layers.draw-borders' in your about:config on Firefox. For many simple text websites, all you'll see is a single green box around the whole page, with a few green boxes around parts of Firefox itself. The whole webpage can be rendered in a single layer (e.g. front page of reddit.com). If you go to a media heavy page such as any video you YouTube, you should see a large red box around the video section, indicating another layer. For Firefox OS, you can see the layers by enabling the preference "Draw Layers Borders".

Without will-animate on Firefox OS, for example the Settings App, the Layer Tree is created once the application is launched and the user begins scrolling. There is a layer around the scrollable area of the Settings app and the Gecko engine does some heuristics to determine that a layer is a scrollable layer, which is then optimized by the platform layer for smooth scroll animations. However, on many of these apps, in order to save memory, the layer tree is collapsed. The scrollable layer's memory is reclaimed because nothing on the screen is moving and Gecko assumes that everything will remain static, moving Frame Tree nodes into as few layers as possible. When the user scrolls again, the layer tree has to be rebuilt and once again Gecko has to detect which part of the app will scroll and optimize for that case. You can see the layer tree collapsing in this video where the borders go away after a couple of seconds, then the layer tree being rebuilt after we scroll again:

With will-animate, we optimize for two things when building the Layer Tree. First, the heuristics to determine that a layer is scrollable go away which optimizes some of that guesswork to figure out which layer has a scrollable component. Second, it prevents Gecko from collapsing the layer, which makes subsequent scrolls start just a tad faster. You can see in this second video, the layer for the scrollable area never collapses, which means from the layout and graphics point of view, the layer tree wasn't thrown away.

Will-animate also helps the Rasterizing of the Layer Tree. As a user scrolls a web page, the Layer Tree constantly has to determine which elements of the webpage are now in view as they are scrolled in and issue draw commands to the appropriate layers to draw the newly scrolled in elements. You can see what elements are being painted in by enabling the "Flash repainted area" option. As you scroll, different elements get different colors meaning they are actively being painted. Elements that were previously on the screen stay the same color as we don't have to repaint those elements. When the Layer Tree collapses, a paint command to draw the whole screen again is issued on a single static layer. You can see a video of this here:

With will-animate, because the Layer Tree isn't collapsed, we don't have to issue the final repaint at the end of the video. Also, once we start scrolling again, we only have to paint the new elements that are scrolled in, saving us a bit of work.

Overall, for the Settings app, we save ~20ms of work, which prevents us from skipping 1 frame if we want to render things at 60 FPS (1000 ms / 60 = 16.66... ms per frame). Some initial numbers show better savings like the home screen app or a whopping 72ms for the Calendar app. Benoit has proposed will-animate as a new CSS property to www-styles, so hopefully it comes to a browser near you.

 

Thanks much to Benoit Girard for proofreading.