Add new Features:

- Block Alignments
- Tables
- Media with Links
- Block Sizes
This commit is contained in:
Michael Fabian 'Xaymar' Dirks
2021-12-28 19:43:39 +01:00
parent 83febcfc79
commit 6adf42d457
20 changed files with 263 additions and 27 deletions
+12 -3
View File
@@ -58,6 +58,15 @@ permalink: '/articles/:year/:month/:day/:slug/'
#ignore_theme_config: true
#theme: null
collections:
posts:
output: false
guides:
output: true
permalink: '/guides/:path/'
label: "Guides"
sort_by: title
defaults:
- scope:
path: ""
@@ -66,7 +75,7 @@ defaults:
layout: "default"
comments: true
- scope:
path: "guides"
path: "_guides"
type: "page"
values:
layout: "default"
@@ -137,7 +146,7 @@ pagination:
#permalink: '/page/:num' # Pages are html files, linked jekyll extensionless permalink style.
# Optional the title format for the paginated pages (supports :title for original page title, :num for pagination page number, :max for total number of pages)
title: ':title - page :num'
title: ':title [:num/:max]'
# Limit how many pagenated pages to create (default: 0, means all)
limit: 0
@@ -197,7 +206,7 @@ autopages:
layouts:
- 'index.liquid'
title: ':coll' # :coll is replaced by the collection name
permalink: '/collection/:coll'
permalink: '/:coll'
silent: false
slugify:
mode: 'default' # :coll is slugified.
@@ -0,0 +1,62 @@
---
layout: default
title: "High Quality Streaming with NVIDIA® NVENC (in OBS® Studio)"
---
{% capture content %}Streaming with more than one PC has been the leader in H.264 encoding for years, but NVIDIAs Turing and Ampere generation has put a significant dent into that lead. The new generation of GPUs with the brand new encoder brought comparable quality x264 medium if you can find a GPU that is. Lets take a look at whats needed to set up your stream for massively improved quality.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}<b>The guide has been updated for:</b><br/>
StreamFX v0.11 and OBS Studio 27.0{% endcapture %}{% include blocks/paragraph.liquid align="center" content=content %}
{% capture content %}Setting up NVENC (for Streaming){% endcapture %}{% include blocks/heading.liquid content=content level=1 %}
{% capture content %}Modern OBS Studio has two ways to achieve the expected quality: the built-in NVENC H.264 (new) and the addition from StreamFX called NVIDIA NVENC H.264/AVC (via FFmpeg). Both Options can achieve similar quality to x264 medium, but the latter is able to exceed that and rival x264 medium/slow in various situations. Whichever you pick, both of them support zero-copy encoding, and theyre both valid options for streaming.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}Built-In: OBS Studio NVENC H.264 (new){% endcapture %}{% include blocks/heading.liquid content=content level=3 %}
{% capture content %}The built-in NVENC option in OBS Studio is by far the simplest option and will give you almost identical quality on Maxwell, Pascal, Turing and Ampere, though Turing and Ampere will make use of the new improvements of the NVENC chip. Maxwell and Pascal users can expect to reach x264 veryfast/faster-like quality, while Turing and Ampere users can expect to hit fast/medium-like quality. Below are the settings you need to set:{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}
<thead><tr>
<th>Option</th>
<th>Maxwell/Pascal</th>
<th>Turing/Ampere</th>
</tr></thead>
<tr>
<td>Preset</td>
<td>Quality</td>
<td>Max Quality<br/><b>or:</b> Quality</td>
</tr>
<tr>
<td>Profile</td>
<td>high</td>
<td>high</td>
</tr>
<tr>
<td>Look-ahead</td>
<td>Enabled/Checked</td>
<td>Enabled/checked</td>
</tr>
<tr>
<td>Psycho-Visual Tuning</td>
<td>Enabled/Checked</td>
<td>Enabled/Checked</td>
</tr>
<tr>
<td>Max B-Frames</td>
<td>1 or 2</td>
<td>3 or 4</td>
</tr>
{% endcapture %}{% include blocks/table.liquid content=content caption="Best built-in NVENC settings." %}
{% capture content %}StreamFX: NVIDIA NVENC H.264/AVC (via FFmpeg){% endcapture %}{% include blocks/heading.liquid content=content level=3 %}
{% capture content %}If youre new to StreamFXs NVENC integration, it will most likely overwhelm you with the settings it offers. But thanks to all those settings, you can actually go above the default quality by quite a significant amount. Note that I will only cover critical settings, as other settings like Bitrate, Buffer Size and Key Frame Interval are explained elsewhere. {% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}For certain platforms it may be necessary to turn off Adaptive I-Frames due to how their internal processing works, such as Twitch. This has a drastic quality impact and should only be done if you rely on that platform alone to reach your audience.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}Setting up Resolution and Framerate to match the Bitrate{% endcapture %}{% include blocks/heading.liquid content=content level=1 %}
{% capture content %}It is no secret than H.264/AVC is an outdated codec and that platforms should have paved the way for better codecs a long time ago, but it is the solution that we are stuck with until AV1 is adopted by the masses. So in order to get the best quality out of our stream, we should aim to also set up our stream according to the bitrate and codec we use. Below is the average result of a few hundred thousand tests at various resolutions and bitrates, according to PSNR and VMAF (weighted PSNR 30:70 VMAF):{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}Please note that watchable in video encoding means that you can decode information within it with reasonable accuracy, instead of it having turned to full garbage. Higher resolutions than 1920×1080 were omitted from the table as the rows would be filled with values between 0 and 1, which just are not very useful to us.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}This means that at 3.5mbit, the highest resolution and framerate for a variety streamer is 1280×720 at 30 FPS, or 960×540 at 60 FPS. The equation shifts slightly for 6.0mbit, where you can either go for 1536×864 at 30 FPS or 1280×720 at 60 FPS. Finally at 8.5mbit you are looking at a maximum resolution and framerate of 1920×1080 at 30 FPS or 1536×864 at 60 FPS.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}Final Words{% endcapture %}{% include blocks/heading.liquid content=content level=3 %}
{% capture content %}In the past few years NVIDIA has made massive improvements to their encoder, which has evened the playing field far beyond what was expected. With no need to transfer frames from the GPU to the CPU, and quality comparable to x264 medium (or better), NVIDIAs Turing NVENC is pushing the boundaries of what is possible in a single consumer PC.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}Whether you use it or not is entirely up to you however. If you already have a working Dual-PC setup that can achieve x264 medium (or better) quality, then you dont gain much from moving to Turing NVENC. But if youre currently stuck on anything below x264 medium, or have a Turing GPU ready to test it out why not give it a shot?{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}Video Examples{% endcapture %}{% include blocks/heading.liquid content=content level=1 %}
+2 -1
View File
@@ -26,7 +26,8 @@
{% if site.xaymar.meta.timestamp.enabled and include.timestamp %}
{% assign has_meta_timestamp=true %}
{% endif %}
{% if site.xaymar.meta.tags.enabled and include.tags != nil %}
{% assign cnt=include.tags | size %}
{% if site.xaymar.meta.tags.enabled and include.tags != nil and cnt > 0 %}
{% assign has_meta_tags=true %}
{% endif %}
{% if site.xaymar.meta.enabled and has_meta_permalink or has_meta_tags or has_meta_date %}
+4 -1
View File
@@ -1,3 +1,6 @@
<div class="block block-{{ include.type }} {% if include.float %}float float-{{ include.float }}{% elsif include.float == "clear" %}float-clear{% endif %}">
<div class="block block-{{ include.type }}
{% if include.float %}float float-{{ include.float }}{% elsif include.float == "clear" %}float-clear{% endif %}
{% if include.align %}align-{{ include.align }}{% endif %}" style="
{% if include.width %}width: {{ include.width }};{% endif %}">
{{ include.content }}
</div>
+1 -1
View File
@@ -3,4 +3,4 @@
{{ include.content }}
</div>
{% endcapture %}
{% include blocks/_base.liquid type="column" content=content float=include.float %}
{% include blocks/_base.liquid type="column" content=content float=include.float align=include.align width=include.width %}
+1 -1
View File
@@ -6,4 +6,4 @@ style="{% if include.columns %}grid-template-columns: repeat({{ include.columns
{{ include.content }}
</div>
{% endcapture %}
{% include blocks/_base.liquid type="columns" content=content float=include.float %}
{% include blocks/_base.liquid type="columns" content=content float=include.float align=include.align %}
+1 -1
View File
@@ -3,4 +3,4 @@
{{ include.content }}
</h{{ include.level | default: 1}}>
{% endcapture %}
{% include blocks/_base.liquid type="heading" content=content float=include.float %}
{% include blocks/_base.liquid type="heading" content=content float=include.float align=include.align %}
+1 -1
View File
@@ -11,4 +11,4 @@
</ul>
{% endif %}
{% endcapture %}
{% include blocks/_base.liquid type="list" content=content float=include.float %}
{% include blocks/_base.liquid type="list" content=content float=include.float align=include.align %}
+7 -1
View File
@@ -1,4 +1,7 @@
{% capture content %}
{% if include.link %}
<a href="{{ include.link }}" {% if include.caption %}alt="{{ include.caption }}"{% endif %}>
{% endif %}
{% if include.type == "image" %}
<picture
src="{{ include.url | absolute_url }}"
@@ -33,8 +36,11 @@
<source src="{{ include.url | absolute_url }}">
</audio>
{% endif %}
{% if include.link %}
</a>
{% endif %}
{% if include.caption %}
<figcaption>{{ include.caption }}</figcaption>
{% endif %}
{% endcapture %}
{% include blocks/_base.liquid type="media" content=content float=include.float %}
{% include blocks/_base.liquid type="media" content=content float=include.float align=include.align %}
+2 -2
View File
@@ -1,6 +1,6 @@
{% capture content %}
<p class="content {% if include.align %}{{ include.align }}{% endif %}">
<p class="content">
{{ include.content }}
</p>
{% endcapture %}
{% include blocks/_base.liquid type="paragraph" content=content float=include.float %}
{% include blocks/_base.liquid type="paragraph" content=content float=include.float align=include.align %}
+7
View File
@@ -0,0 +1,7 @@
{% capture content %}
<table class="content">
{{ include.content }}
</table>
{% if include.caption %}<figcaption>{{ include.caption }}</figcaption>{% endif %}
{% endcapture %}
{% include blocks/_base.liquid type="table" content=content float=include.float align=include.align %}
+2 -1
View File
@@ -6,7 +6,8 @@
</span>
{% if include.permalink != "/" and include.permalink != "/index.html" %}
&raquo;
{% if page.categories %}
{% assign cnt=page.categories | size %}
{% if cnt > 0 %}
{% for entry in page.categories %}
{% assign category=entry | slugify: site.xaymar.links.category.slugify %}
<span class="crumb">
+1 -1
View File
@@ -13,7 +13,7 @@ article ~ article {
article > .title {
padding: .25rem 1rem;
margin: 0;
font-size: 1.667em;
font-size: 2.5rem;
font-variant: small-caps;
font-weight: bold;
white-space: normal;
+11 -2
View File
@@ -12,10 +12,19 @@ $theme-menu-color: hsl($theme-hue, 0%, 85%);
$theme-menu-color-active: hsl($theme-hue, 0%, 100%);
$theme-article-background: hsl($theme-hue, 50%, 10%);
$theme-article-color: $theme-content-color;
$theme-article-link-color: hsl($theme-hue, 50%, 75%);
$theme-article-link-color-active: hsl($theme-hue, 100%, 85%);
$theme-article-title-background: hsl($theme-hue, 60%, 50%);
$theme-article-title-color: hsl($theme-hue, 100%, 100%);
$theme-article-heading-h1-background: hsl($theme-hue, 75%, 30%);
$theme-article-heading-h2-background: hsl($theme-hue, 75%, 15%);
$theme-article-heading-h3-background: transparent;
$theme-article-heading-h4-background: transparent;
$theme-article-heading-h5-background: transparent;
$theme-article-heading-h6-background: transparent;
$theme-article-table-head-background: hsl($theme-hue, 75%, 25%);
$theme-article-table-body-background: hsl($theme-hue, 60%, 15%);
$theme-article-table-body-background-alt: hsl($theme-hue, 60%, 12.5%);
$theme-article-link-color: hsl($theme-hue, 50%, 75%);
$theme-article-link-color-active: hsl($theme-hue, 100%, 85%);
$theme-article-meta-background: hsl($theme-hue, 50%, 7.5%);
$theme-article-meta-color: hsl($theme-hue, 0%, 70%);
$theme-article-meta-link-color: hsl($theme-hue, 100%, 70%);
+47
View File
@@ -0,0 +1,47 @@
.block-heading {
margin: 0;
margin-top: 1.5rem;
margin-left: -0.75rem;
margin-right: -0.75rem;
padding: 0;
}
.block-heading > .content {
font-variant: small-caps;
font-weight: bold;
padding: 0.5rem 0.75rem;
}
.block-heading > h1.content {
font-size: 2.0rem;
background: $theme-article-heading-h1-background;
}
.block-heading > h2.content {
font-size: 1.8rem;
background: $theme-article-heading-h2-background;
}
.block-heading > h3.content {
font-size: 1.6667rem;
background: $theme-article-heading-h3-background;
}
.block-heading > h4.content {
font-size: 1.45rem;
background: $theme-article-heading-h4-background;
}
.block-heading > h5.content {
font-size: 1.3333rem;
background: $theme-article-heading-h5-background;
}
.block-heading > h6.content {
font-size: 1.2rem;
background: $theme-article-heading-h6-background;
}
.block-heading + .block {
margin-top: .25rem;
}
+2
View File
@@ -6,6 +6,7 @@
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
@@ -16,6 +17,7 @@
// --------------------------------------------------------------------------------
// Block: Media > Video
// --------------------------------------------------------------------------------
.block-media > a > video,
.block-media > video {
display: block;
width: 100%;
+55
View File
@@ -0,0 +1,55 @@
// --------------------------------------------------------------------------------
// Block: Table
// --------------------------------------------------------------------------------
.block-table > table {
margin: 0;
padding: 0;
display: table;
width: 100%;
table-layout: auto;
border-collapse: collapse;
}
.block-table > table > thead > tr,
.block-table > table > tbody > tr {
margin: 0;
padding: 0;
vertical-align: top;
}
.block-table > table > thead > tr {
background: $theme-article-table-head-background;
}
.block-table > table > tbody > tr {
background: $theme-article-table-body-background;
}
.block-table > table > tbody > tr:nth-child(2n) {
background: $theme-article-table-body-background-alt;
}
.block-table > table > thead > tr > th,
.block-table > table > tbody > tr > th {
margin: 0;
padding: 0.75rem 1.5rem;
font-weight: bold;
font-variant: small-caps;
text-align: start;
vertical-align: top;
}
.block-table > table > thead > tr > td,
.block-table > table > tbody > tr > td {
margin: 0;
padding: 0.75rem 1.5rem;
}
.block-table > figcaption {
display: block;
margin: 0;
padding: .25em .5em;
text-align: center;
font-size: 0.9em;
background: rgba(0, 0, 0, 0.5);
}
+42 -1
View File
@@ -2,9 +2,10 @@
padding: 0;
margin: 0;
overflow: auto;
text-align: start;
}
.block ~ .block {
.block + .block {
margin-top: 1.25em;
}
@@ -17,12 +18,23 @@
// Float
// --------------------------------------------------------------------------------
.float {}
.float-start {
float: inline-start;
}
.float-end {
float: inline-end;
}
.float-left {
float: left;
}
.float-right {
float: right;
}
.float-clear {
clear: both;
}
@@ -34,6 +46,33 @@
margin-top: 0;
}
// --------------------------------------------------------------------------------
// Align
// --------------------------------------------------------------------------------
.align-start {
text-align: start;
}
.align-end {
text-align: end;
}
.align-left {
text-align: left;
}
.align-right {
text-align: right;
}
.align-justify {
text-align: justify;
}
.align-center {
text-align: center;
}
// --------------------------------------------------------------------------------
// Block: Paragraph
// --------------------------------------------------------------------------------
@@ -81,4 +120,6 @@
// Specialized Blocks
// --------------------------------------------------------------------------------
@import "_block-columns.scss";
@import "_block-heading.scss";
@import "_block-media.scss";
@import "_block-table.scss";
@@ -1,9 +0,0 @@
---
layout: default
title: "High Quality Streaming with NVIDIA® NVENC (in OBS® Studio)"
---
{% capture content %}Streaming with more than one PC has been the leader in H.264 encoding for years, but NVIDIAs Turing and Ampere generation has put a significant dent into that lead. The new generation of GPUs with the brand new encoder brought comparable quality x264 medium if you can find a GPU that is. Lets take a look at whats needed to set up your stream for massively improved quality.{% endcapture %}{% include blocks/paragraph.liquid content=content %}
{% capture content %}<b>The guide has been updated for:</b><br/>
StreamFX v0.11 and OBS Studio 27.0{% endcapture %}{% include blocks/paragraph.liquid content=content align=center %}
+3 -1
View File
@@ -6,6 +6,8 @@
],
"settings": {
"files.trimTrailingWhitespace": true,
"editor.autoIndent": "keep"
"editor.autoIndent": "keep",
"editor.renderWhitespace": "all",
"files.trimFinalNewlines": true
}
}