Skip to content

Commit 25c63d7

Browse files
authored
Cleaned up feature table layout and logic (#32)
1 parent 7c7d6b7 commit 25c63d7

File tree

6 files changed

+142
-66
lines changed

6 files changed

+142
-66
lines changed

source/frontend/assets/css/feature_table.css

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,19 @@
1+
body {
2+
min-width:fit-content;
3+
}
4+
15
.FeatureTable {
26
font-family: "Roboto", sans-serif;
3-
overflow-x: scroll;
4-
padding: auto;
7+
}
8+
9+
.FeatureTable thead {
10+
position: sticky;
11+
top: 0;
12+
z-index: 2;
13+
}
14+
15+
.FeatureTable thead tr {
16+
background-color: #00000000;
517
}
618

719
.Microsoft {
@@ -110,12 +122,11 @@ thead>tr:nth-of-type(2)>th {
110122
border-style: solid;
111123
border-width: 0.1em;
112124
padding: 0.3em;
113-
margin: 0 0.2em;
114125
position: absolute;
115126
z-index: 3;
116127
}
117128

118-
.tooltiptextbottom {
129+
.tooltiptextbottomright {
119130
top: 110%;
120131
left: 95%;
121132
transform: translateX(-100%);
@@ -127,6 +138,11 @@ thead>tr:nth-of-type(2)>th {
127138
transform: translateX(-50%);
128139
}
129140

141+
.tooltiptextbottomleft {
142+
top: 110%;
143+
left: 5%;
144+
}
145+
130146
.tooltiptexttop {
131147
bottom: 110%;
132148
left: 0%;

source/frontend/assets/css/main.css

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@
1111
body {
1212
color: #000000;
1313
background-color: #FFFFFF;
14+
margin: 8px;
1415
}
1516

1617
table,
@@ -43,6 +44,19 @@ a:hover {
4344
align-items: center;
4445
}
4546

47+
.headerContainer {
48+
width: 100%;
49+
max-width: 2100px;
50+
margin: 0 auto;
51+
}
52+
53+
.headerContainer2 {
54+
position:sticky;
55+
left: 8px;
56+
width: calc(100vw - 16px);
57+
max-width: 2100px;
58+
}
59+
4660
.header {
4761
height: 2.2em;
4862
padding-top: 0.1em;
@@ -51,7 +65,6 @@ a:hover {
5165
justify-content: center;
5266
align-items: center;
5367
width: 100%;
54-
max-width: 2100px;
5568
margin: 0 auto 0.4em auto;
5669
border-width: 2px;
5770
border-radius: 4px;

source/frontend/assets/css/report_table.css

Lines changed: 17 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -155,11 +155,19 @@ button:disabled {
155155
top: 0;
156156
}
157157

158-
.FormatTable tr:nth-of-type(1) {
158+
.FormatTable tr:nth-of-type(1) td {
159159
position: sticky;
160160
top: 0;
161161
}
162162

163+
.FormatTable tr:nth-of-type(1) td:nth-of-type(odd) {
164+
background-color: #e6e6e6;
165+
}
166+
167+
.FormatTable tr:nth-of-type(1) td:nth-of-type(even) {
168+
background-color: #d8d8d8;
169+
}
170+
163171
.vertical-text {
164172
writing-mode: vertical-rl;
165173
white-space: pre;
@@ -216,4 +224,12 @@ button:disabled {
216224
color: #ffffff;
217225
border-color: #7f7f7f;
218226
}
227+
228+
.FormatTable tr:nth-of-type(1) td:nth-of-type(odd) {
229+
background-color: #262626;
230+
}
231+
232+
.FormatTable tr:nth-of-type(1) td:nth-of-type(even) {
233+
background-color: #212121;
234+
}
219235
}
Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,35 +1,39 @@
11
<noscript>This website requires javascript to run</noscript>
2-
<div class="header">
3-
<div style="width: 0.5em"></div>
4-
<a class="headerLink" href="index.html">
5-
<div class="headerText">D3d12infoDB</div>
6-
</a>
7-
<div style="width: 1em"></div>
8-
<a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest">
9-
<div class="headerText">GUI</div>
10-
<img class="icon" src="../icons/download.svg">
11-
</a>
12-
<a class="headerLink" href="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/Devaniti/D3d12infoGUI">
13-
<div class="headerText">Source</div>
14-
<img class="icon" src="../icons/github-mark.svg">
15-
</a>
16-
<div style="width: 1em"></div>
17-
<a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest">
18-
<div class="headerText">CLI</div>
19-
<img class="icon" src="../icons/download.svg">
20-
</a>
21-
<a class="headerLink" href="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/sawickiap/D3d12info">
22-
<div class="headerText">Source</div>
23-
<img class="icon" src="../icons/github-mark.svg">
24-
</a>
25-
<div class="flexRight">
26-
<a class="headerLink" href="FeatureTable.html">
27-
<div class="headerText">Feature Table</div>
28-
</a>
29-
<a class="headerLink" href="about.html">
30-
<div class="headerText">About</div>
31-
</a>
32-
<div style="width: 3em"></div>
2+
<div class="headerContainer">
3+
<div class="headerContainer2">
4+
<div class="header">
5+
<div style="width: 0.5em"></div>
6+
<a class="headerLink" href="index.html">
7+
<div class="headerText">D3d12infoDB</div>
8+
</a>
9+
<div style="width: 1em"></div>
10+
<a class="headerLink" href="https://github.com/Devaniti/D3d12infoGUI/releases/latest">
11+
<div class="headerText">GUI</div>
12+
<img class="icon" src="../icons/download.svg">
13+
</a>
14+
<a class="headerLink" href="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/Devaniti/D3d12infoGUI">
15+
<div class="headerText">Source</div>
16+
<img class="icon" src="../icons/github-mark.svg">
17+
</a>
18+
<div style="width: 1em"></div>
19+
<a class="headerLink" href="https://github.com/sawickiap/D3d12info/releases/latest">
20+
<div class="headerText">CLI</div>
21+
<img class="icon" src="../icons/download.svg">
22+
</a>
23+
<a class="headerLink" href="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/sawickiap/D3d12info">
24+
<div class="headerText">Source</div>
25+
<img class="icon" src="../icons/github-mark.svg">
26+
</a>
27+
<div class="flexRight">
28+
<a class="headerLink" href="FeatureTable.html">
29+
<div class="headerText">Feature Table</div>
30+
</a>
31+
<a class="headerLink" href="about.html">
32+
<div class="headerText">About</div>
33+
</a>
34+
<div style="width: 3em"></div>
35+
</div>
36+
<div style="width: 0.5em"></div>
37+
</div>
3338
</div>
34-
<div style="width: 0.5em"></div>
3539
</div>

source/frontend/assets/js/constants.mjs

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -541,7 +541,8 @@ export const EnumMappings =
541541
"6": "Vega",
542542
"7": "RDNA",
543543
"8": "RDNA2",
544-
"9": "RDNA3"
544+
"9": "RDNA3",
545+
"10": "RDNA4"
545546
},
546547
"AMD GDT_GfxCardInfo.asicType":
547548
{

source/frontend/assets/js/website_feature_table.mjs

Lines changed: 53 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -604,16 +604,17 @@ function SpliceReportByArchAndVendor(reportContainer) {
604604
"RDNA", ///< AMD RDNA architecture
605605
"RDNA2", ///< AMD RDNA2 architecture
606606
"RDNA3", ///< AMD RDNA3 architecture
607+
"RDNA4", ///< AMD RDNA4 architecture
607608
];
608609
// TODO: unknown asic reports could be assigned by device ID lists
609610
if (report.AGSDeviceInfo.asicFamily != 0) {
610611
arch = AMDArchitectures[report.AGSDeviceInfo.asicFamily];
611612

612-
// filter out RDNA2 iGPUs with 1 WGP because those don't support mesh shaders unlike all the others (TODO: should we handle this differently?)
613-
if (arch == "RDNA2" && report.AGSDeviceInfo.numWGPs == 1 && report.D3D12_FEATURE_DATA_D3D12_OPTIONS7.MeshShaderTier == 0)
614-
return;
613+
if (!arch) {
614+
arch = "Arch ID " + report.AGSDeviceInfo.asicFamily;
615+
}
615616

616-
if (arch) ArchsPerVendor.AMD.add(arch);
617+
ArchsPerVendor.AMD.add(arch);
617618
}
618619
}
619620
else if (vendorId.startsWith("Intel")) {
@@ -687,31 +688,29 @@ function SpliceReportByArchAndVendor(reportContainer) {
687688
}
688689
arch = GetKeyByValue(NvidiaArchitectures, report.NvPhysicalGpuHandle["NvAPI_GPU_GetArchInfo - NV_GPU_ARCH_INFO::architecture_id"]);
689690

690-
// filter variants except Maxwell, should have same D3D12 features (though not CUDA features)
691-
if (arch) {
692-
if (arch == "Kepler2" || arch == "Kepler1")
693-
arch = "Kepler";
694-
else if (arch == "Fermi1")
695-
arch = "Fermi"; // unconfirmed
696-
else if (arch == "Volta1")
697-
arch = "Volta"; // unconfirmed
698-
else if (arch == "Turing") { // differentiate between Turing 16 (no RT) and Turing 20 (RTX)
699-
let codename = report.NvPhysicalGpuHandle["NvAPI_GPU_GetArchInfo - NV_GPU_ARCH_INFO::implementation_id"];
700-
if (codename == 360 || codename == 359 || report.DXGI_ADAPTER_DESC3.Description.includes("GTX 16")) // TU116/117 or TU106 with RT disabled
701-
arch = "Turing 16";
702-
else
703-
arch = "Turing 20";
704-
}
691+
if (!arch) {
692+
arch = "Arch ID " + report.NvPhysicalGpuHandle["NvAPI_GPU_GetArchInfo - NV_GPU_ARCH_INFO::architecture_id"];
705693
}
706694

695+
// filter variants except Maxwell, should have same D3D12 features (though not CUDA features)
696+
if (arch == "Kepler2" || arch == "Kepler1")
697+
arch = "Kepler";
698+
else if (arch == "Fermi1")
699+
arch = "Fermi"; // unconfirmed
700+
else if (arch == "Volta1")
701+
arch = "Volta"; // unconfirmed
702+
707703
ArchsPerVendor.Nvidia.add(arch ? arch : report.NvPhysicalGpuHandle["NvAPI_GPU_GetArchInfo - NV_GPU_ARCH_INFO::architecture_id"].toString());
708704
}
709705
else if (vendorId.startsWith("Qualcomm")) {
710706

711707
if (/Snapdragon\(R\) X (Plus)|(Elite) - X1.*/.test(report.DXGI_ADAPTER_DESC3.Description))
712708
arch = "X1";
713709
else if (report.DXGI_ADAPTER_DESC3.Description.includes("8cx"))
710+
{
714711
arch = report.DXGI_ADAPTER_DESC3.Description.slice(report.DXGI_ADAPTER_DESC3.Description.search(/8cx.*/));
712+
arch = arch.replace("Gen ", "");
713+
}
715714

716715
if (arch) ArchsPerVendor.Qualcomm.add(arch);
717716
}
@@ -742,12 +741,23 @@ function IsReportNewer(lhs, rhs) {
742741
return lhs.ID > rhs.ID;
743742
}
744743

744+
function FeatureTableFilter(report) {
745+
if (report.GetField("Header.Using preview Agility SDK"))
746+
return true;
747+
748+
// filter out RDNA2 iGPUs with 1 WGP since they don't have mesh shaders unlike all other RDNA2 GPUs
749+
if (report.GetField("AGSDeviceInfo.asicFamily") == 8 && report.GetField("AGSDeviceInfo.numWGPs") == 1 && report.GetField("D3D12_FEATURE_DATA_D3D12_OPTIONS7.MeshShaderTier") == 0)
750+
return true;
751+
752+
return false;
753+
}
754+
745755
function PrepareReportsForTable() {
746756

747757
ClearTableReportData();
748758

749759
for (let report of Reports) {
750-
if (!report.GetField("Header.Using preview Agility SDK"))
760+
if (!FeatureTableFilter(report))
751761
SpliceReportByArchAndVendor(report);
752762
}
753763

@@ -900,7 +910,7 @@ function UpdateTableHeader(table) {
900910
{
901911
alignOutsideVertical: true,
902912
preferTowardsBottom: true,
903-
tooltipAlignment: "bottom"
913+
tooltipAlignment: "bottomright"
904914
});
905915
}
906916
}
@@ -941,8 +951,14 @@ function UpdateTableBody(table) {
941951
else if (featureName == "TableMarketShare") {
942952
let td = document.createElement("td");
943953
let marketShare = ArchStats[archName];
954+
let tooltipText;
944955

945-
if (marketShare == undefined)
956+
if (archName == "WARP")
957+
{
958+
marketShare = "N/A"
959+
tooltipText = "WARP is a software rasterizer, not a hardware GPU, so it doesn't have a market share and not in Steam Hardware Survey.";
960+
}
961+
else if (marketShare == undefined)
946962
{
947963
marketShare = "~0%"
948964
}
@@ -952,6 +968,8 @@ function UpdateTableBody(table) {
952968
}
953969
td.append(marketShare)
954970
featureRow.appendChild(td)
971+
if (tooltipText)
972+
AddTooltipForTable(td, tooltipText, { alignOutsideVertical: true, tooltipAlignment: "bottomleft" });
955973
}
956974
else if (featureName == "TableReportUsed") {
957975
let td = document.createElement("td");
@@ -985,7 +1003,6 @@ function UpdateTableBody(table) {
9851003
if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS21.WorkGraphsTier" && featureValue == undefined) {
9861004
featureValue = newestReportContainer.GetField("D3D12_FEATURE_DATA_D3D12_OPTIONS_EXPERIMENTAL.WorkGraphsTier");
9871005
}
988-
9891006
// GPU Upload Heap support depends on BIOS settings / Windows version, so if any report is true we take that one
9901007
else if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS16.GPUUploadHeapSupported") {
9911008
for (let r of ReportsPerArch.get(archName)) {
@@ -995,16 +1012,25 @@ function UpdateTableBody(table) {
9951012
}
9961013
}
9971014
}
998-
9991015
// If our tiled resource tier is 3, the SRVOnlyTiledResourceTier3 flag does not apply, but is always true, which is misleading
10001016
else if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS5.SRVOnlyTiledResourceTier3" && newestDriverReport.D3D12_FEATURE_DATA_D3D12_OPTIONS.TiledResourcesTier >= 3) {
10011017
featureValue = "N/A";
10021018
displayRawFeatureValue = true;
10031019
}
1004-
else if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS5.RaytracingTier" && (archName == "Pascal" || archName == "Turing 16")) {
1005-
featureValue = TableTrueFalseMapping["1"] + "/" + TableTrueFalseMapping["0"];
1020+
else if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS5.RaytracingTier" && archName == "Pascal") {
1021+
featureValue = "Tier 1.0 *";
1022+
displayRawFeatureValue = true;
1023+
tooltipText = "Pascal have (software emulated) Tier 1.0 raytracing support, but only if the card has 6GB of VRAM or more";
1024+
}
1025+
else if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS5.RaytracingTier" && archName == "Turing") {
1026+
featureValue = "Tier 1.1 *";
1027+
displayRawFeatureValue = true;
1028+
tooltipText = "Within Turing architecture there are:\nRTX 20 series and Quadro RTX cards with hardware Tier 1.1 support\nGTX 16 series cards with >= 6GB of VRAM with software emulated Tier 1.0 support\nGTX 16 series cards with < 6GB of VRAM with no raytracing support at all";
1029+
}
1030+
else if (featureName == "D3D12_FEATURE_DATA_D3D12_OPTIONS7.MeshShaderTier" && archName == "RDNA2") {
1031+
featureValue = TableTrueFalseMapping["1"] + "*";
10061032
displayRawFeatureValue = true;
1007-
tooltipText = "Pascal and Turing 16 have (software emulated) Tier 1.0 raytracing support, but only if the card has 6GB VRAM or more";
1033+
tooltipText = "RDNA2 iGPUs with 1 WGP don't have mesh shader support";
10081034
}
10091035
let td = document.createElement("td");
10101036
td.append(displayRawFeatureValue ? featureValue : MakeHumanReadableForTable(featureName, featureValue));

0 commit comments

Comments
 (0)