4874 lines
126 KiB
HTML
4874 lines
126 KiB
HTML
<!-- Copyright Epic Games, Inc. All Rights Reserved. -->
|
|
<html>
|
|
<title>GPU Dump Viewer</title>
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
// -------------------------------------------------------------------- CONSTANTS
|
|
|
|
const k_current_dir = "./";
|
|
|
|
const k_scroll_width = 8;
|
|
const k_null_json_ptr = "0000000000000000";
|
|
|
|
|
|
// -------------------------------------------------------------------- GLOBALS
|
|
|
|
var g_dump_service = {};
|
|
var g_infos = {};
|
|
var g_dump_cvars = {};
|
|
var g_passes = [];
|
|
var g_descs = {};
|
|
|
|
var g_view = null;
|
|
|
|
|
|
// -------------------------------------------------------------------- GLOBALS
|
|
|
|
class IView
|
|
{
|
|
constructor()
|
|
{
|
|
|
|
}
|
|
|
|
setup_html(parent)
|
|
{
|
|
parent.innerHTML = '';
|
|
}
|
|
|
|
resize(ctx)
|
|
{
|
|
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [];
|
|
}
|
|
|
|
release()
|
|
{
|
|
|
|
}
|
|
}
|
|
|
|
function set_main_view(new_view)
|
|
{
|
|
var parent_dom = document.getElementById('main_right_pannel');
|
|
if (g_view !== null)
|
|
{
|
|
g_view.release();
|
|
delete g_view;
|
|
parent_dom.innerHTML = '';
|
|
}
|
|
g_view = new_view;
|
|
if (g_view !== null)
|
|
{
|
|
g_view.setup_html(parent_dom);
|
|
onresize_body();
|
|
}
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- FILE LOADING
|
|
|
|
function does_file_exists(relative_path)
|
|
{
|
|
try
|
|
{
|
|
var request = new XMLHttpRequest();
|
|
request.open('HEAD', k_current_dir + relative_path, false);
|
|
request.send(null);
|
|
return request.status != 404;
|
|
}
|
|
catch (error)
|
|
{
|
|
return false;
|
|
}
|
|
return false;
|
|
}
|
|
|
|
function load_text_file(relative_path)
|
|
{
|
|
try
|
|
{
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', k_current_dir + relative_path, false);
|
|
request.send(null);
|
|
if (request.status === 0 || request.status === 200)
|
|
{
|
|
return request.responseText;
|
|
}
|
|
add_console_event('error', `couldn't load ${relative_path}: Returned HTTP status ${request.status}`);
|
|
}
|
|
catch (error)
|
|
{
|
|
add_console_event('error', `couldn't load ${relative_path}: ${error}`);
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function load_binary_file(relative_path, callback)
|
|
{
|
|
try
|
|
{
|
|
var request = new XMLHttpRequest();
|
|
request.open('GET', k_current_dir + relative_path, true);
|
|
request.responseType = "arraybuffer";
|
|
|
|
request.onload = function(event)
|
|
{
|
|
var array_buffer = request.response;
|
|
if ((request.status === 0 || request.status === 200) && array_buffer)
|
|
{
|
|
callback(array_buffer);
|
|
}
|
|
else
|
|
{
|
|
add_console_event('error', `couldn't load ${relative_path}: Returned HTTP status ${request.status}`);
|
|
callback(null);
|
|
}
|
|
};
|
|
|
|
request.onerror = function() {
|
|
add_console_event('error', `couldn't load ${relative_path}`);
|
|
callback(null);
|
|
};
|
|
|
|
request.send(null);
|
|
}
|
|
catch (error)
|
|
{
|
|
add_console_event('error', `couldn't load ${relative_path}: ${error}`);
|
|
callback(null);
|
|
}
|
|
}
|
|
|
|
function load_resource_binary_file(relative_path, callback)
|
|
{
|
|
return load_binary_file(relative_path, function(raw_texture_data)
|
|
{
|
|
var compression_type = '';
|
|
if (g_dump_service['CompressionName'] == 'Zlib')
|
|
{
|
|
compression_type = 'deflate';
|
|
}
|
|
else if (g_dump_service['CompressionName'] == 'GZip')
|
|
{
|
|
compression_type = 'gzip';
|
|
}
|
|
|
|
if (raw_texture_data === null || compression_type == '')
|
|
{
|
|
return callback(raw_texture_data);
|
|
}
|
|
|
|
var decompressor = new DecompressionStream(compression_type);
|
|
var decompressed_stream = new Blob([raw_texture_data]).stream().pipeThrough(decompressor);
|
|
new Response(decompressed_stream).arrayBuffer().then(callback, function() { callback(null); });
|
|
});
|
|
}
|
|
|
|
function load_json(relative_path)
|
|
{
|
|
var txt = load_text_file(relative_path);
|
|
|
|
if (txt === null)
|
|
{
|
|
return null;
|
|
}
|
|
|
|
return JSON.parse(load_text_file(relative_path));
|
|
}
|
|
|
|
function load_json_dict_sequence(relative_path)
|
|
{
|
|
var text_file = load_text_file(relative_path);
|
|
if (text_file == '')
|
|
{
|
|
return new Array();
|
|
}
|
|
var dicts = text_file.split("}{");
|
|
var dict_sequence = [];
|
|
dicts.forEach(function(value, index, array) {
|
|
if (!value.startsWith('{'))
|
|
{
|
|
value = '{' + value;
|
|
}
|
|
if (!value.endsWith('}'))
|
|
{
|
|
value = value + '}';
|
|
}
|
|
dict_sequence.push(JSON.parse(value));
|
|
});
|
|
return dict_sequence;
|
|
}
|
|
|
|
function get_resource_desc(unique_resource_name)
|
|
{
|
|
return g_descs[unique_resource_name];
|
|
}
|
|
|
|
function load_structure_metadata(structure_ptr)
|
|
{
|
|
var cache = {};
|
|
|
|
function load_nested_structure_metadata(nested_structure_ptr)
|
|
{
|
|
if (nested_structure_ptr in cache)
|
|
{
|
|
return cache[nested_structure_ptr];
|
|
}
|
|
|
|
var metadata = load_json(`StructuresMetadata/${nested_structure_ptr}.json`);
|
|
cache[nested_structure_ptr] = metadata;
|
|
|
|
for (var member of metadata['Members'])
|
|
{
|
|
if (member['StructMetadata'] == k_null_json_ptr)
|
|
{
|
|
member['StructMetadata'] = null;
|
|
}
|
|
else
|
|
{
|
|
member['StructMetadata'] = load_nested_structure_metadata(member['StructMetadata']);
|
|
}
|
|
}
|
|
|
|
return metadata;
|
|
}
|
|
|
|
return load_nested_structure_metadata(structure_ptr);
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- UTILITY
|
|
|
|
function get_filename(file_path)
|
|
{
|
|
return file_path.split(/(\\|\/)/g).pop();
|
|
}
|
|
|
|
function px_string_to_int(str)
|
|
{
|
|
if (Number.isInteger(str))
|
|
{
|
|
return str;
|
|
}
|
|
if (str.endsWith('px'))
|
|
{
|
|
return Number(str.substring(0, str.length - 2));
|
|
}
|
|
return Number(str);
|
|
}
|
|
|
|
function parse_subresource_unique_name(subresource_unique_name)
|
|
{
|
|
var splitted_name = subresource_unique_name.split(".");
|
|
|
|
var subresource_info = {};
|
|
subresource_info['subresource'] = null;
|
|
subresource_info['array_slice'] = null;
|
|
|
|
if (splitted_name[splitted_name.length - 1].startsWith('mip') || splitted_name[splitted_name.length - 1] == 'stencil')
|
|
{
|
|
subresource_info['subresource'] = splitted_name.pop();
|
|
}
|
|
|
|
if (splitted_name[splitted_name.length - 1].startsWith('[') && splitted_name[splitted_name.length - 1].endsWith(']'))
|
|
{
|
|
var array_slice_bracket = splitted_name.pop();
|
|
subresource_info['array_slice'] = parseInt(array_slice_bracket.substring(1, array_slice_bracket.length - 1));
|
|
}
|
|
|
|
subresource_info['resource'] = splitted_name.join('.');
|
|
|
|
return subresource_info;
|
|
}
|
|
|
|
function get_subresource_unique_name(subresource_info)
|
|
{
|
|
var subresource_unique_name = subresource_info['resource'];
|
|
if (subresource_info['array_slice'] !== null)
|
|
{
|
|
subresource_unique_name += `.[${subresource_info['array_slice']}]`;
|
|
}
|
|
if (subresource_info['subresource'] !== null)
|
|
{
|
|
subresource_unique_name += `.${subresource_info['subresource']}`;
|
|
}
|
|
return subresource_unique_name;
|
|
}
|
|
|
|
function prettify_subresource_unique_name(subresource_info, resource_desc)
|
|
{
|
|
if (!resource_desc)
|
|
{
|
|
return get_subresource_unique_name(subresource_info);
|
|
}
|
|
|
|
var name = resource_desc['Name'];
|
|
|
|
if (subresource_info['array_slice'] !== null)
|
|
{
|
|
name += ` slice[${subresource_info['array_slice']}]`;
|
|
}
|
|
|
|
if (subresource_info['subresource'] !== null && (subresource_info['subresource'] == 'stencil' || resource_desc['NumMips'] > 1))
|
|
{
|
|
name += ` ${subresource_info['subresource']}`;
|
|
}
|
|
|
|
return name;
|
|
}
|
|
|
|
function parse_subresource_unique_version_name(subresource_unique_version_name)
|
|
{
|
|
var splitted_name = subresource_unique_version_name.split(".");
|
|
|
|
var pass_ptr = -1;
|
|
var draw_id = -1;
|
|
|
|
var last = splitted_name.pop();
|
|
if (last.startsWith('d'))
|
|
{
|
|
draw_id = parseInt(last.substring(1));
|
|
last = splitted_name.pop();
|
|
}
|
|
|
|
if (last.startsWith('v'))
|
|
{
|
|
pass_ptr = last.substring(1);
|
|
}
|
|
|
|
var subresource_unique_name = splitted_name.join('.');
|
|
var subresource_version_info = parse_subresource_unique_name(subresource_unique_name);
|
|
|
|
subresource_version_info['pass'] = pass_ptr;
|
|
subresource_version_info['draw'] = draw_id;
|
|
return subresource_version_info;
|
|
}
|
|
|
|
function get_subresource_unique_version_name(subresource_version_info)
|
|
{
|
|
if (subresource_version_info['draw'] >= 0)
|
|
{
|
|
return `${get_subresource_unique_name(subresource_version_info)}.v${subresource_version_info['pass']}.d${subresource_version_info['draw']}`;
|
|
}
|
|
return `${get_subresource_unique_name(subresource_version_info)}.v${subresource_version_info['pass']}`;
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- SHADER PARAMETERS
|
|
|
|
function iterate_structure_members(root_structure_metadata, callback)
|
|
{
|
|
function iterate_recursive(structure_metadata, offset, cpp_prefix, shader_prefix)
|
|
{
|
|
for (var member of structure_metadata['Members'])
|
|
{
|
|
var base_type = member['BaseType'];
|
|
|
|
if (base_type == 'UBMT_NESTED_STRUCT')
|
|
{
|
|
iterate_recursive(member['StructMetadata'], offset + member['Offset'], cpp_prefix + member['Name'] + '.', shader_prefix + member['Name'] + '_');
|
|
}
|
|
else if (base_type == 'UBMT_INCLUDED_STRUCT')
|
|
{
|
|
iterate_recursive(member['StructMetadata'], offset + member['Offset'], cpp_prefix + member['Name'] + '.', shader_prefix);
|
|
}
|
|
else
|
|
{
|
|
var params = {
|
|
member: member,
|
|
base_type: base_type,
|
|
byte_offset: offset + member['Offset'],
|
|
cpp_name: cpp_prefix + member['Name'],
|
|
shader_name: shader_prefix + member['Name'],
|
|
};
|
|
callback(params);
|
|
}
|
|
}
|
|
}
|
|
|
|
iterate_recursive(root_structure_metadata, /* offset = */ 0, /* cpp_prefix = */ '', /* shader_prefix = */ '');
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- FLOAT ENCODING
|
|
|
|
function decode_float(raw, total_bit_count, exp_bit_count, has_sign)
|
|
{
|
|
var exp_bias = (1 << (exp_bit_count - 1)) - 1;
|
|
var mantissa_bit_count = total_bit_count - exp_bit_count - (has_sign ? 1 : 0);
|
|
|
|
var sign_bit = (raw >> (total_bit_count - 1)) & 0x1;
|
|
var mantissa_bits = (raw >> 0) & ((0x1 << mantissa_bit_count) - 1);
|
|
var exp_bits = (raw >> mantissa_bit_count) & ((0x1 << exp_bit_count) - 1);
|
|
|
|
var is_max_exp = exp_bits == ((0x1 << exp_bit_count) - 1);
|
|
|
|
var is_denormal = exp_bits == 0;
|
|
var is_infinity = is_max_exp && mantissa_bits == 0;
|
|
var is_nan = is_max_exp && mantissa_bits != 0;
|
|
|
|
var exp = exp_bits - exp_bias;
|
|
var mantissa = mantissa_bits * Math.pow(0.5, mantissa_bit_count);
|
|
var sign = (has_sign && (sign_bit == 1)) ? -1 : 1;
|
|
|
|
if (is_nan)
|
|
{
|
|
return 'nan';
|
|
}
|
|
else if (is_infinity)
|
|
{
|
|
return sign == -1 ? '-inf' : '+inf';
|
|
}
|
|
else if (is_denormal)
|
|
{
|
|
var value = sign * mantissa * Math.pow(0.5, exp_bias - 1);
|
|
return value;
|
|
}
|
|
else
|
|
{
|
|
var value = sign * (1.0 + mantissa) * Math.pow(2.0, exp);
|
|
return value;
|
|
}
|
|
}
|
|
|
|
function decode_float10(raw)
|
|
{
|
|
return decode_float(raw, /* total_bit_count = */ 10, /* exp_bit_count = */ 5, /* has_sign = */ false);
|
|
}
|
|
|
|
function decode_float11(raw)
|
|
{
|
|
return decode_float(raw, /* total_bit_count = */ 11, /* exp_bit_count = */ 5, /* has_sign = */ false);
|
|
}
|
|
|
|
function decode_float16(raw)
|
|
{
|
|
return decode_float(raw, /* total_bit_count = */ 16, /* exp_bit_count = */ 5, /* has_sign = */ true);
|
|
}
|
|
|
|
function decode_float32(raw)
|
|
{
|
|
return decode_float(raw, /* total_bit_count = */ 32, /* exp_bit_count = */ 8, /* has_sign = */ true);
|
|
}
|
|
|
|
function test_decode_float()
|
|
{
|
|
var tests = [
|
|
// Zero
|
|
[0x0000, 0.0],
|
|
[0x8000, -0.0],
|
|
|
|
// normals
|
|
[0x4000, 2.0],
|
|
[0xc000, -2.0],
|
|
|
|
// denormals
|
|
[0x0001, 5.960464477539063e-8],
|
|
[0x8001, -5.960464477539063e-8],
|
|
|
|
// exotics
|
|
[0x7c00, '+inf'],
|
|
[0xFc00, '-inf'],
|
|
[0x7c01, 'nan'],
|
|
[0xFc01, 'nan'],
|
|
];
|
|
|
|
for (var i = 0; i < tests.length; i++)
|
|
{
|
|
var encoded = tests[i][0];
|
|
var ref = tests[i][1];
|
|
var computed = decode_float16(encoded);
|
|
|
|
console.assert(computed == ref);
|
|
}
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY PASS
|
|
|
|
function display_pass_hierarchy()
|
|
{
|
|
var search_pass = document.getElementById('pass_search_input').value;
|
|
var search_resource = document.getElementById('resource_search_input').value;
|
|
var html = '';
|
|
var parent_event_scopes = [];
|
|
|
|
g_passes.forEach(function(pass_data, pass_id) {
|
|
var pass_event_scopes = pass_data['ParentEventScopes'];
|
|
|
|
var show_pass = true;
|
|
if (search_pass != '')
|
|
{
|
|
show_pass = pass_data['EventName'].toLowerCase().includes(search_pass.toLowerCase());
|
|
|
|
for (var i = 0; i < pass_event_scopes.length; i++)
|
|
{
|
|
show_pass = show_pass || pass_event_scopes[i].toLowerCase().includes(search_pass.toLowerCase());
|
|
}
|
|
}
|
|
|
|
var show_resource = true;
|
|
if (search_resource != '')
|
|
{
|
|
show_resource = false;
|
|
for (var subresource_unique_name of pass_data['InputResources'])
|
|
{
|
|
var resource_unique_name = parse_subresource_unique_name(subresource_unique_name)['resource'];
|
|
var resource_name = get_resource_desc(resource_unique_name)['Name'];
|
|
show_resource = show_resource || resource_name.toLowerCase().includes(search_resource.toLowerCase());
|
|
}
|
|
for (var subresource_unique_name of pass_data['OutputResources'])
|
|
{
|
|
var resource_unique_name = parse_subresource_unique_name(subresource_unique_name)['resource'];
|
|
var resource_name = get_resource_desc(resource_unique_name)['Name'];
|
|
show_resource = show_resource || resource_name.toLowerCase().includes(search_resource.toLowerCase());
|
|
}
|
|
}
|
|
|
|
var has_input_or_outputs = pass_data['InputResources'].length > 0 || pass_data['OutputResources'].length > 0;
|
|
|
|
if (show_pass && show_resource && has_input_or_outputs)
|
|
{
|
|
var shared_scope = 0;
|
|
for (var i = 0; i < Math.min(parent_event_scopes.length, pass_event_scopes.length); i++)
|
|
{
|
|
if (parent_event_scopes[i] == pass_event_scopes[pass_event_scopes.length - 1 - i])
|
|
{
|
|
shared_scope++;
|
|
}
|
|
else
|
|
{
|
|
break;
|
|
}
|
|
}
|
|
|
|
parent_event_scopes = parent_event_scopes.slice(0, shared_scope);
|
|
|
|
for (var i = shared_scope; i < pass_event_scopes.length; i++)
|
|
{
|
|
var scope = pass_event_scopes[pass_event_scopes.length - 1 - i];
|
|
html += `<a style="padding-left: ${10 + 16 * i}px;" class="disabled">${scope}</a>`;
|
|
parent_event_scopes.push(scope);
|
|
}
|
|
|
|
html += `<a style="padding-left: ${10 + 16 * pass_event_scopes.length}px;" href="#display_pass(${pass_id});">${pass_data['EventName']}</a>`;
|
|
}
|
|
});
|
|
document.getElementById('pass_hierarchy').innerHTML = html;
|
|
update_href_selection(document.getElementById('pass_hierarchy'));
|
|
}
|
|
|
|
class ResourceView extends IView
|
|
{
|
|
constructor(subresource_version_info, resource_desc)
|
|
{
|
|
super();
|
|
this.subresource_version_info = subresource_version_info;
|
|
this.resource_desc = resource_desc;
|
|
this.onload = function() { };
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [];
|
|
}
|
|
}
|
|
|
|
class PassView extends IView
|
|
{
|
|
constructor(pass_id)
|
|
{
|
|
super();
|
|
this.pass_id = pass_id;
|
|
this.pass_data = g_passes[pass_id];
|
|
this.pass_draws_data = [];
|
|
this.resource_view = null;
|
|
|
|
if (this.pass_data['DrawCount'] > 0)
|
|
{
|
|
this.pass_draws_data = load_json_dict_sequence(`Passes/Pass.${this.pass_data['Pointer']}.Draws.json`);
|
|
}
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
var column_width = '50%';
|
|
var draw_column_display = 'none';
|
|
|
|
if (this.pass_draws_data.length > 0)
|
|
{
|
|
column_width = '33%';
|
|
draw_column_display = 'block';
|
|
}
|
|
|
|
parent_dom.innerHTML = `
|
|
<div class="pass_title main_div">
|
|
${this.pass_data['EventName']}
|
|
<div class="button_list" style="display:inline-block;"><a href="#display_pass_parameters(${this.pass_id});">PassParameters</a></div>
|
|
</div>
|
|
<table width="100%">
|
|
<tr>
|
|
<td width="${column_width}">
|
|
<div class="main_div">
|
|
<div class="selection_list_title">Input resources</div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="pass_input_resource_search" oninput="g_view.refresh_input_resource_list();" onchange="g_view.refresh_input_resource_list();" placeholder="Search input resource..." />
|
|
</div>
|
|
<div class="selection_list" id="pass_input_resource_list"></div>
|
|
</div>
|
|
</td>
|
|
<td width="${column_width}">
|
|
<div class="main_div">
|
|
<div class="selection_list_title">Output resources</div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="pass_output_resource_search" oninput="g_view.refresh_output_resource_list();" onchange="g_view.refresh_output_resource_list();" placeholder="Search output resource..." />
|
|
</div>
|
|
<div class="selection_list" id="pass_output_resource_list"></div>
|
|
</div>
|
|
</td>
|
|
<td width="${column_width}">
|
|
<div class="main_div" style="display: ${draw_column_display};">
|
|
<div class="selection_list_title">Draws</div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="pass_draw_search" oninput="g_view.refresh_draw_resource_list();" onchange="g_view.refresh_draw_resource_list();" placeholder="Search draw..." />
|
|
</div>
|
|
<div class="selection_list" id="pass_draw_list"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div id="display_resource_pannel"></div>
|
|
<table width="100%">
|
|
<tr>
|
|
<td width="50%">
|
|
<div class="main_div" id="resource_pass_modifying_outter">
|
|
<div class="selection_list_title" id="resource_pass_modifying_title"></div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="resource_pass_modifying_search" oninput="g_view.refresh_resource_modifying_list();" onchange="g_view.refresh_resource_modifying_list();" placeholder="Search modifying pass..." />
|
|
</div>
|
|
<div class="selection_list" id="resource_pass_modifying_list"></div>
|
|
</div>
|
|
</td>
|
|
<td width="50%">
|
|
<div class="main_div" id="resource_pass_reading_outter">
|
|
<div class="selection_list_title" id="resource_pass_reading_title"></div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="resource_pass_reading_search" oninput="g_view.refresh_resource_reading_list();" onchange="g_view.refresh_resource_reading_list();" placeholder="Search reading pass..." />
|
|
</div>
|
|
<div class="selection_list" id="resource_pass_reading_list"></div>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
`;
|
|
}
|
|
|
|
refresh_all_lists()
|
|
{
|
|
this.refresh_input_resource_list();
|
|
this.refresh_output_resource_list();
|
|
this.refresh_draw_resource_list();
|
|
this.refresh_resource_modifying_list();
|
|
this.refresh_resource_reading_list();
|
|
}
|
|
|
|
refresh_input_resource_list()
|
|
{
|
|
var display_list = [];
|
|
for (const subresource_unique_name of this.pass_data['InputResources'])
|
|
{
|
|
var subresource_info = parse_subresource_unique_name(subresource_unique_name);
|
|
var resource_desc = get_resource_desc(subresource_info['resource']);
|
|
|
|
var name = prettify_subresource_unique_name(subresource_info, resource_desc);
|
|
var href = null;
|
|
if (resource_desc)
|
|
{
|
|
href = `#display_input_resource(${this.pass_id},'${subresource_unique_name}');`
|
|
}
|
|
|
|
display_list.push({'name': name, 'href': href});
|
|
}
|
|
|
|
render_selection_list_html(
|
|
document.getElementById('pass_input_resource_list'),
|
|
display_list,
|
|
{
|
|
'search': document.getElementById('pass_input_resource_search').value,
|
|
'deduplicate': true,
|
|
'sort': true
|
|
});
|
|
}
|
|
|
|
refresh_output_resource_list()
|
|
{
|
|
var draw_id = -1;
|
|
if (this.resource_view)
|
|
{
|
|
draw_id = this.resource_view.subresource_version_info['draw'];
|
|
}
|
|
|
|
var display_list = [];
|
|
for (const subresource_unique_name of this.pass_data['OutputResources'])
|
|
{
|
|
var subresource_info = parse_subresource_unique_name(subresource_unique_name);
|
|
var resource_desc = get_resource_desc(subresource_info['resource']);
|
|
|
|
var name = prettify_subresource_unique_name(subresource_info, resource_desc);
|
|
var href = null;
|
|
if (resource_desc)
|
|
{
|
|
if (draw_id >= 0)
|
|
{
|
|
href = `#display_draw_output_resource(${this.pass_id},'${subresource_unique_name}',${draw_id});`;
|
|
}
|
|
else
|
|
{
|
|
href = `#display_output_resource(${this.pass_id},'${subresource_unique_name}');`;
|
|
}
|
|
}
|
|
|
|
display_list.push({'name': name, 'href': href});
|
|
}
|
|
|
|
render_selection_list_html(
|
|
document.getElementById('pass_output_resource_list'),
|
|
display_list,
|
|
{
|
|
'search': document.getElementById('pass_output_resource_search').value,
|
|
});
|
|
}
|
|
|
|
refresh_draw_resource_list()
|
|
{
|
|
var is_output_resource = false;
|
|
var subresource_unique_name = '';
|
|
if (this.resource_view)
|
|
{
|
|
is_output_resource = this.pass_data['OutputResources'].includes(get_subresource_unique_name(this.resource_view.subresource_version_info));
|
|
subresource_unique_name = get_subresource_unique_name(this.resource_view.subresource_version_info);
|
|
}
|
|
|
|
var display_list = [];
|
|
for (var draw_id = 0; draw_id < this.pass_draws_data.length; draw_id++)
|
|
{
|
|
var href = null;
|
|
if (subresource_unique_name && is_output_resource)
|
|
{
|
|
href = `#display_draw_output_resource(${this.pass_id},'${subresource_unique_name}',${draw_id});`;
|
|
}
|
|
|
|
display_list.push({
|
|
'name': `${draw_id}: ${this.pass_draws_data[draw_id]['DrawName']}`,
|
|
'href': href
|
|
});
|
|
}
|
|
|
|
if (subresource_unique_name)
|
|
{
|
|
var href = null;
|
|
if (is_output_resource)
|
|
{
|
|
href = `#display_output_resource(${this.pass_id},'${subresource_unique_name}');`;
|
|
}
|
|
|
|
display_list.push({
|
|
'name': 'Final pass output',
|
|
'href': href
|
|
});
|
|
}
|
|
|
|
render_selection_list_html(
|
|
document.getElementById('pass_draw_list'),
|
|
display_list,
|
|
{
|
|
'search': document.getElementById('pass_draw_search').value,
|
|
});
|
|
}
|
|
|
|
refresh_resource_modifying_list()
|
|
{
|
|
if (this.resource_view === null || this.resource_view.resource_desc['Desc'] == 'FRDGParameterStruct')
|
|
{
|
|
document.getElementById('resource_pass_modifying_outter').style.display = 'none';
|
|
return;
|
|
}
|
|
document.getElementById('resource_pass_modifying_outter').style.display = 'block';
|
|
|
|
var subresource_unique_name = get_subresource_unique_name(this.resource_view.subresource_version_info);
|
|
var resource_desc = get_resource_desc(this.resource_view.subresource_version_info['resource']);
|
|
|
|
var display_list = [];
|
|
for (var pass_id = 0; pass_id < g_passes.length; pass_id++)
|
|
{
|
|
var producer = false;
|
|
g_passes[pass_id]['OutputResources'].forEach(function(value) {
|
|
if (value == subresource_unique_name)
|
|
{
|
|
producer = true;
|
|
}
|
|
});
|
|
|
|
if (producer)
|
|
{
|
|
display_list.push({
|
|
'name': g_passes[pass_id]['EventName'],
|
|
'href': `#display_output_resource(${pass_id},'${subresource_unique_name}');`,
|
|
});
|
|
}
|
|
}
|
|
|
|
document.getElementById('resource_pass_modifying_title').innerHTML = `Passes modifying ${resource_desc['Name']}`;
|
|
render_selection_list_html(
|
|
document.getElementById('resource_pass_modifying_list'),
|
|
display_list,
|
|
{
|
|
'search': document.getElementById('resource_pass_modifying_search').value,
|
|
});
|
|
}
|
|
|
|
refresh_resource_reading_list()
|
|
{
|
|
if (this.resource_view === null || this.resource_view.resource_desc['Desc'] == 'FRDGParameterStruct')
|
|
{
|
|
document.getElementById('resource_pass_reading_outter').style.display = 'none';
|
|
return;
|
|
}
|
|
document.getElementById('resource_pass_reading_outter').style.display = 'block';
|
|
|
|
var subresource_unique_name = get_subresource_unique_name(this.resource_view.subresource_version_info);
|
|
var resource_desc = get_resource_desc(this.resource_view.subresource_version_info['resource']);
|
|
|
|
var display_list = [];
|
|
for (var pass_id = 0; pass_id < g_passes.length; pass_id++)
|
|
{
|
|
var reader = false;
|
|
g_passes[pass_id]['InputResources'].forEach(function(value) {
|
|
if (value == subresource_unique_name)
|
|
{
|
|
reader = true;
|
|
}
|
|
});
|
|
|
|
if (reader)
|
|
{
|
|
display_list.push({
|
|
'name': g_passes[pass_id]['EventName'],
|
|
'href': `#display_input_resource(${pass_id},'${subresource_unique_name}');`,
|
|
});
|
|
}
|
|
}
|
|
|
|
document.getElementById('resource_pass_reading_title').innerHTML = `Passes reading ${resource_desc['Name']}`;
|
|
render_selection_list_html(
|
|
document.getElementById('resource_pass_reading_list'),
|
|
display_list,
|
|
{
|
|
'search': document.getElementById('resource_pass_reading_search').value,
|
|
});
|
|
}
|
|
|
|
resize(ctx)
|
|
{
|
|
if (this.resource_view !== null)
|
|
{
|
|
this.resource_view.resize(ctx);
|
|
}
|
|
}
|
|
|
|
set_resource_view(new_resource_view)
|
|
{
|
|
var parent_dom = document.getElementById('display_resource_pannel');
|
|
if (this.resource_view !== null)
|
|
{
|
|
this.resource_view.release();
|
|
delete this.resource_view;
|
|
parent_dom.innerHTML = '';
|
|
}
|
|
|
|
this.resource_view = new_resource_view;
|
|
if (this.resource_view !== null)
|
|
{
|
|
this.resource_view.setup_html(parent_dom);
|
|
this.refresh_all_lists();
|
|
onresize_body();
|
|
}
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
var navs = [`display_pass(${this.pass_id});`];
|
|
|
|
if (this.resource_view !== null)
|
|
{
|
|
navs.concat(this.resource_view.navigations);
|
|
}
|
|
|
|
return navs;
|
|
}
|
|
|
|
release()
|
|
{
|
|
this.set_resource_view(null);
|
|
}
|
|
}
|
|
|
|
function display_pass_internal(pass_id)
|
|
{
|
|
if (g_view instanceof PassView && pass_id == g_view.pass_id)
|
|
{
|
|
return;
|
|
}
|
|
|
|
set_main_view(new PassView(pass_id));
|
|
}
|
|
|
|
function display_resource_internal(subresource_version_info)
|
|
{
|
|
var resource_desc = get_resource_desc(subresource_version_info['resource']);
|
|
if (!resource_desc)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (g_view.resource_view !== null && get_subresource_unique_version_name(g_view.resource_view.subresource_version_info) == get_subresource_unique_version_name(subresource_version_info))
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (resource_desc['Desc'] == 'FRDGBufferDesc')
|
|
{
|
|
g_view.set_resource_view(new BufferView(subresource_version_info, resource_desc));
|
|
}
|
|
else if (resource_desc['Desc'] == 'FRDGTextureDesc' && (resource_desc['Type'] == 'Texture2D' || resource_desc['Type'] == 'Texture2DArray'))
|
|
{
|
|
var new_texture_view = new TextureView(subresource_version_info, resource_desc);
|
|
|
|
// Keep the same zoom settings if the subresources are exactly the same extent
|
|
if (g_view && 'resource_view' in g_view && g_view.resource_view instanceof TextureView)
|
|
{
|
|
var zoom_settings = g_view.resource_view.get_zoom_settings();
|
|
|
|
if (new_texture_view.is_zoom_settings_compatible(zoom_settings))
|
|
{
|
|
new_texture_view.onload = function() {
|
|
new_texture_view.apply_zoom_settings(zoom_settings);
|
|
};
|
|
}
|
|
}
|
|
|
|
g_view.set_resource_view(new_texture_view);
|
|
}
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- HREF FUNCTIONS
|
|
|
|
function display_pass(pass_id)
|
|
{
|
|
// Load first resource
|
|
if (g_passes[pass_id]['OutputResources'][0])
|
|
{
|
|
redirect_to_hash(`display_output_resource(${pass_id},'${g_passes[pass_id]['OutputResources'][0]}');`);
|
|
}
|
|
else if (g_passes[pass_id]['InputResources'][0])
|
|
{
|
|
redirect_to_hash(`display_input_resource(${pass_id},'${g_passes[pass_id]['InputResources'][0]}');`);
|
|
}
|
|
else
|
|
{
|
|
display_pass_internal(pass_id);
|
|
}
|
|
}
|
|
|
|
function display_input_resource(pass_id, subresource_unique_name)
|
|
{
|
|
var previous_producer_pass = -1;
|
|
for (var i = 0; i < pass_id; i++)
|
|
{
|
|
var cur_outputs = g_passes[i]['OutputResources'];
|
|
|
|
cur_outputs.forEach(function(value) {
|
|
if (value == subresource_unique_name)
|
|
{
|
|
previous_producer_pass = i;
|
|
}
|
|
});
|
|
}
|
|
|
|
var subresource_version_info = parse_subresource_unique_name(subresource_unique_name);
|
|
if (previous_producer_pass >= 0)
|
|
{
|
|
subresource_version_info['pass'] = g_passes[previous_producer_pass]['Pointer'];
|
|
}
|
|
else
|
|
{
|
|
subresource_version_info['pass'] = k_null_json_ptr;
|
|
}
|
|
|
|
display_pass_internal(pass_id);
|
|
display_resource_internal(subresource_version_info);
|
|
}
|
|
|
|
function display_output_resource(pass_id, subresource_unique_name)
|
|
{
|
|
var subresource_version_info = parse_subresource_unique_name(subresource_unique_name);
|
|
subresource_version_info['pass'] = g_passes[pass_id]['Pointer'];
|
|
|
|
display_pass_internal(pass_id);
|
|
display_resource_internal(subresource_version_info);
|
|
}
|
|
|
|
function display_draw_output_resource(pass_id, subresource_unique_name, draw_id)
|
|
{
|
|
var subresource_version_info = parse_subresource_unique_name(subresource_unique_name);
|
|
subresource_version_info['pass'] = g_passes[pass_id]['Pointer'];
|
|
subresource_version_info['draw'] = draw_id;
|
|
|
|
display_pass_internal(pass_id);
|
|
display_resource_internal(subresource_version_info);
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY VIEWER CONSOLE
|
|
|
|
var g_console_events = [];
|
|
var g_console_error_count = 0;
|
|
|
|
class ConsoleEvent
|
|
{
|
|
constructor(type, message)
|
|
{
|
|
this.type = type;
|
|
this.message = message;
|
|
}
|
|
}
|
|
|
|
class ConsoleView extends IView
|
|
{
|
|
constructor()
|
|
{
|
|
super();
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
parent_dom.innerHTML = `
|
|
<div class="main_div">
|
|
<div class="pass_title">Viewer Console</div>
|
|
<div id="console_events_pannel"></div>
|
|
</div>`;
|
|
|
|
document.title = 'Viewer Console';
|
|
this.update_console_events();
|
|
}
|
|
|
|
update_console_events()
|
|
{
|
|
var html = `
|
|
<table width="100%" class="pretty_table">`;
|
|
|
|
for (var console_event of g_console_events)
|
|
{
|
|
html += `
|
|
<tr class="${console_event.type}">
|
|
<td>${console_event.type}: ${console_event.message}</td>
|
|
</tr>`;
|
|
};
|
|
|
|
html += `
|
|
</table>`;
|
|
|
|
document.getElementById('console_events_pannel').innerHTML = html;
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [`display_console();`];
|
|
}
|
|
}
|
|
|
|
function update_console_button()
|
|
{
|
|
if (document.getElementById('console_button') && g_console_error_count > 0)
|
|
{
|
|
document.getElementById('console_button').classList.add('error');
|
|
document.getElementById('console_button').innerHTML = `Console (${g_console_error_count} Errors)`;
|
|
}
|
|
}
|
|
|
|
function add_console_event(type, message)
|
|
{
|
|
console.assert(['error', 'log'].includes(type));
|
|
g_console_events.push(new ConsoleEvent(type, message));
|
|
|
|
if (type == 'error')
|
|
{
|
|
g_console_error_count += 1;
|
|
update_console_button();
|
|
}
|
|
|
|
if (g_view instanceof ConsoleView)
|
|
{
|
|
g_view.update_console_events();
|
|
}
|
|
}
|
|
|
|
function display_console(tip_id)
|
|
{
|
|
set_main_view(new ConsoleView());
|
|
}
|
|
|
|
function init_console()
|
|
{
|
|
window.addEventListener('error', function(event) {
|
|
add_console_event('error', `${event.filename}:${event.fileno}: ${event.message}`);
|
|
});
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY INFOS
|
|
|
|
class InfosView extends IView
|
|
{
|
|
constructor()
|
|
{
|
|
super();
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
var info_htmls = '';
|
|
{
|
|
info_htmls += `
|
|
<table width="100%" class="pretty_table">`;
|
|
|
|
for (var key in g_infos)
|
|
{
|
|
if (g_infos.hasOwnProperty(key))
|
|
{
|
|
info_htmls += `
|
|
<tr>
|
|
<td width="100px">${key}</td>
|
|
<td>${g_infos[key]}</td>
|
|
</tr>`;
|
|
}
|
|
}
|
|
|
|
info_htmls += `
|
|
</table>`;
|
|
}
|
|
|
|
parent_dom.innerHTML = `
|
|
<div class="main_div">
|
|
<div class="pass_title">Infos</div>
|
|
<div id="infos_pannel">${info_htmls}</div>
|
|
</div>`;
|
|
|
|
if (does_file_exists('Base/Screenshot.png'))
|
|
{
|
|
parent_dom.innerHTML += `
|
|
<div class="main_div">
|
|
<div class="pass_title">Screenshot</div>
|
|
<img src="${k_current_dir}/Base/Screenshot.png" style="width: 100%;" />
|
|
</div>`;
|
|
}
|
|
|
|
document.title = 'Dump infos';
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [`display_infos();`];
|
|
}
|
|
}
|
|
|
|
function display_infos(tip_id)
|
|
{
|
|
set_main_view(new InfosView());
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY TIP
|
|
|
|
const k_tips = [
|
|
// Dumping process
|
|
'Can use the CTRL+SHIFT+/ keyboard shortcut to summon the DumpGPU command.',
|
|
'Speed up your frame dump by only selecting the passes you need with r.DumpGPU.Root. For instance r.DumpGPU.Root="*PostProcessing*".',
|
|
'GPU dumps can be large and accumulate on your hard drive in your various projects\' Saved/ directories. Set r.DumpGPU.Directory="D:/tmp/DumpGPU/" in your console variables or UE-DumpGPUPath environment variable to dump them all at the same location on your machine.',
|
|
'Uses -cvarsini to override console variables with your own ConsoleVariables.ini file on a cooked build.',
|
|
|
|
// General navigations
|
|
'All navigation links can be open in a new tab.',
|
|
'Uses the browser\'s back button to navigate to previously inspected resource.',
|
|
'Make sure to browse the dump informations.',
|
|
'Make sure to browse the console variables.',
|
|
'Make sure to browse the log file.',
|
|
'Share the part of the URL after the # (for instance #display_input_resource(96,\'TSR.AntiAliasing.Noise.000000006b9b2c00.mip0\');) to anyone else whom have this GPU dump to so they too can navigate to the exact same resource view.',
|
|
'Set r.DumpGPU.Viewer.Visualize in your ConsoleVariables.ini so the dump viewer automatically open this RDG output resource at startup.',
|
|
|
|
// Buffer visualization
|
|
'Uses the templated FRDGBufferDesc::Create*<FMyStructure>(NumElements) to display your buffer more conveniently with FMyStructure layout in the buffer visualization.',
|
|
'Buffer visualization supports float, half, int, uint, short, ushort, char, uchar, as well as hexadecimal with hex(uint) and binary with bin(uint).',
|
|
'Uses the "Address..." field at the very left of the buffer view\'s header to navigate to a specific address. Supports decimal and 0x prefixed hexadecimal notations.',
|
|
|
|
// Texture visualization
|
|
'Click the texture viewer to then zoom in and out with your mouse wheel.',
|
|
'Right click to drag texture viewport arround when zoomed in.',
|
|
'Uses the texture viewer\'s "copy to clipboard" to share your texture visualization to anyone.',
|
|
];
|
|
|
|
class TipView extends IView
|
|
{
|
|
constructor(tip_id)
|
|
{
|
|
super();
|
|
this.tip_id = tip_id;
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
parent_dom.innerHTML = `
|
|
<div style="padding-top: 20%; width: 50%; margin: 0 auto; font-size: 14;">
|
|
<div>User tip:</div>
|
|
<div style="padding: 20px;">${k_tips[this.tip_id]}</div>
|
|
<div class="button_list" style="margin-left: auto; display: block; width: 100px;">
|
|
<a href="#display_tip(${(this.tip_id + 1) % k_tips.length});">Next</a>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [`display_tip(${this.tip_id});`];
|
|
}
|
|
}
|
|
|
|
function display_tip(tip_id)
|
|
{
|
|
if (tip_id === undefined)
|
|
{
|
|
tip_id = Math.floor(Math.random() * k_tips.length);
|
|
document.title = 'GPU Dump Viewer';
|
|
}
|
|
else
|
|
{
|
|
document.title = `User tip #${tip_id + 1}`;
|
|
}
|
|
|
|
set_main_view(new TipView(tip_id));
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY CONSOLE VARIABLES
|
|
|
|
class CVarsView extends IView
|
|
{
|
|
constructor()
|
|
{
|
|
super();
|
|
this.load_cvars();
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
parent_dom.innerHTML = `
|
|
<div class="main_div">
|
|
<div class="pass_title">Console variables</div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="cvars_search_input" oninput="g_view.refresh_cvars();" onchange="g_view.refresh_cvars();" style="width: 100%;" placeholder="Search console variables..." />
|
|
</div>
|
|
<div id="cvars_pannel"></div>
|
|
</div>`;
|
|
|
|
this.refresh_cvars();
|
|
document.title = 'Console variables';
|
|
}
|
|
|
|
load_cvars()
|
|
{
|
|
var cvars_csv = load_text_file('Base/ConsoleVariables.csv');
|
|
|
|
this.cvars = [];
|
|
var cvars_set = new Set();
|
|
var csv_lines = cvars_csv.split('\n');
|
|
for (var i = 1; i < csv_lines.length - 1; i++)
|
|
{
|
|
var csv_line = csv_lines[i].split(',');
|
|
var entry = {};
|
|
entry['name'] = csv_line[0];
|
|
entry['type'] = csv_line[1];
|
|
entry['set_by'] = csv_line[2];
|
|
entry['value'] = csv_line[3];
|
|
|
|
if (!cvars_set.has(entry['name']))
|
|
{
|
|
cvars_set.add(entry['name']);
|
|
this.cvars.push(entry);
|
|
}
|
|
}
|
|
|
|
this.cvars.sort(function(a, b)
|
|
{
|
|
if (a['name'] < b['name'])
|
|
{
|
|
return -1;
|
|
}
|
|
else if (a['name'] > b['name'])
|
|
{
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
refresh_cvars()
|
|
{
|
|
var html = `
|
|
<table width="100%" class="pretty_table">
|
|
<tr class="header">
|
|
<td>Name</td>
|
|
<td width="15%">Value</td>
|
|
<td width="30px">Type</td>
|
|
<td width="100px">Set by</td>
|
|
</tr>`;
|
|
|
|
var cvar_search = document.getElementById('cvars_search_input').value.toLowerCase();
|
|
|
|
this.cvars.forEach(function(cvar)
|
|
{
|
|
var display = true;
|
|
if (cvar_search)
|
|
{
|
|
display = cvar['name'].toLowerCase().includes(cvar_search);
|
|
}
|
|
|
|
if (display)
|
|
{
|
|
html += `
|
|
<tr>
|
|
<td>${cvar['name']}</td>
|
|
<td>${cvar['value']}</td>
|
|
<td>${cvar['type']}</td>
|
|
<td>${cvar['set_by']}</td>
|
|
</tr>`;
|
|
}
|
|
});
|
|
|
|
html += `
|
|
</table>`;
|
|
|
|
document.getElementById('cvars_pannel').innerHTML = html;
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [`display_cvars();`];
|
|
}
|
|
|
|
release()
|
|
{
|
|
this.cvars = null;
|
|
}
|
|
}
|
|
|
|
function display_cvars()
|
|
{
|
|
set_main_view(new CVarsView());
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY LOG
|
|
|
|
function get_log_path()
|
|
{
|
|
return `Base/${g_infos['Project']}.log`;
|
|
}
|
|
|
|
class LogView extends IView
|
|
{
|
|
constructor()
|
|
{
|
|
super();
|
|
|
|
this.log = [];
|
|
|
|
var log = load_text_file(get_log_path());
|
|
if (log)
|
|
{
|
|
this.log = log.split('\n');
|
|
}
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
parent_dom.innerHTML = `
|
|
<div class="main_div">
|
|
<div class="pass_title">Log</div>
|
|
<div class="selection_list_search">
|
|
<input type="search" id="log_search_input" oninput="g_view.refresh_log();" onchange="g_view.refresh_log();" style="width: 100%;" placeholder="Search log..." />
|
|
</div>
|
|
<div id="log_pannel"></div>
|
|
</div>`;
|
|
|
|
this.refresh_log();
|
|
document.title = 'Log';
|
|
}
|
|
|
|
refresh_log()
|
|
{
|
|
var html = `
|
|
<table width="100%" class="pretty_table">`;
|
|
|
|
var log_search = document.getElementById('log_search_input').value.toLowerCase();
|
|
|
|
this.log.forEach(function(log_line)
|
|
{
|
|
var display = true;
|
|
if (log_search)
|
|
{
|
|
display = log_line.toLowerCase().includes(log_search);
|
|
}
|
|
|
|
if (display)
|
|
{
|
|
html += `
|
|
<tr>
|
|
<td>${log_line}</td>
|
|
</tr>`;
|
|
}
|
|
});
|
|
|
|
html += `
|
|
</table>`;
|
|
|
|
document.getElementById('log_pannel').innerHTML = html;
|
|
}
|
|
|
|
get navigations()
|
|
{
|
|
return [`display_log();`];
|
|
}
|
|
|
|
release()
|
|
{
|
|
this.log = null;
|
|
}
|
|
}
|
|
|
|
function display_log()
|
|
{
|
|
set_main_view(new LogView());
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY TEXTURE
|
|
|
|
var k_exotic_raw_channel_bit_depth = 0;
|
|
var g_shader_code_dict = {};
|
|
|
|
class TextureView extends ResourceView
|
|
{
|
|
constructor(subresource_version_info, resource_desc)
|
|
{
|
|
super(subresource_version_info, resource_desc);
|
|
this.is_ready = false;
|
|
this.raw_texture_data = null;
|
|
this.subresource_desc = null;
|
|
this.release_gl();
|
|
this.viewport_width = 1;
|
|
this.pixel_scaling = 0;
|
|
this.viewport_selected = false;
|
|
this.is_draging_canvas = false;
|
|
this.display_mode = 'Visualization';
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
var subresource_extent = this.get_subresource_extent();
|
|
|
|
var dpi = window.devicePixelRatio || 1;
|
|
|
|
var canvas_rendering_res_x = subresource_extent['x'];
|
|
var canvas_rendering_res_y = subresource_extent['y'];
|
|
|
|
var canvas_display_w = canvas_rendering_res_x / dpi;
|
|
var canvas_display_h = canvas_rendering_res_y / dpi;
|
|
|
|
var resource_info_htmls = '';
|
|
{
|
|
resource_info_htmls += `
|
|
<table width="100%" class="pretty_table resource_desc">`;
|
|
|
|
for (var key in this.resource_desc)
|
|
{
|
|
if (this.resource_desc.hasOwnProperty(key)){
|
|
resource_info_htmls += `
|
|
<tr>
|
|
<td>${key}</td>
|
|
<td>${this.resource_desc[key]}</td>
|
|
</tr>`;
|
|
}
|
|
}
|
|
|
|
resource_info_htmls += `
|
|
</table>`;
|
|
}
|
|
|
|
var title = prettify_subresource_unique_name(this.subresource_version_info, this.resource_desc);
|
|
if (this.subresource_version_info['draw'] >= 0)
|
|
{
|
|
title += ` draw:${this.subresource_version_info['draw']}`;
|
|
}
|
|
|
|
var html = `
|
|
<div class="main_div">
|
|
<div class="selection_list_title">Texture visualization: ${title}</div>
|
|
<div id="canvas_outter" style="margin-bottom: 10px;">
|
|
<div id="canvas_header">
|
|
<div class="button_list" id="texture_visualization_change_pixel_scaling"><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_pixel_scaling(this);" value="Fit"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_pixel_scaling(this);" value="1:1"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_pixel_scaling(this);" value="2:1"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_pixel_scaling(this);" value="4:1"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_pixel_scaling(this);" value="8:1"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_pixel_scaling(this);" value="16:1"/>
|
|
</div>
|
|
<div class="button_list">
|
|
<input type="button" onclick="g_view.resource_view.copy_canvas_to_clipboard();" value="Copy to clipboard"/>
|
|
</div>
|
|
<div class="button_list" id="texture_visualization_change_display_modes"><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_display_mode(this);" value="Visualization"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_display_mode(this);" value="NaN"/><!---
|
|
---><input type="button" onclick="g_view.resource_view.change_display_mode(this);" value="Inf"/>
|
|
</div>
|
|
</div>
|
|
<div id="canvas_viewport">
|
|
<canvas
|
|
id="texture_visualization_canvas"
|
|
width="${canvas_rendering_res_x}"
|
|
height="${canvas_rendering_res_y}"
|
|
style="width: ${canvas_display_w}px; height: ${canvas_display_h}px;"></canvas>
|
|
</div>
|
|
<div id="canvas_footer">
|
|
<table>
|
|
<tr>
|
|
<td>Cursor texel pos:</td>
|
|
<td id="canvas_hover_texel_info"></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Selected texel pos:</td>
|
|
<td id="canvas_selected_texel_info"></td>
|
|
</tr>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
<table width="100%">
|
|
<tr>
|
|
<td width="50%">
|
|
<div class="selection_list_title">Texture descriptor</div>
|
|
${resource_info_htmls}
|
|
</td>
|
|
<td style="width: 50%;">
|
|
<textarea id="texture_visualization_code_input" oninput="g_view.resource_view.shader_user_code_change();" onchange="g_view.resource_view.shader_user_code_change();"></textarea>
|
|
<textarea id="texture_visualization_code_log" readonly></textarea>
|
|
<div style="padding: 3px 10px;"><a class="external_link" href="https://www.khronos.org/files/webgl20-reference-guide.pdf">WebGL 2.0's quick reference card</a></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</div>`;
|
|
|
|
parent_dom.innerHTML = html;
|
|
|
|
update_value_selection(document.getElementById('texture_visualization_change_pixel_scaling'), `Fit`);
|
|
update_value_selection(document.getElementById('texture_visualization_change_display_modes'), `Visualization`);
|
|
|
|
// Init WebGL 2.0
|
|
this.init_gl();
|
|
|
|
// Translate the descriptor of the subresource.
|
|
this.subresource_desc = this.translate_subresource_desc();
|
|
if (this.subresource_desc === null)
|
|
{
|
|
return;
|
|
}
|
|
|
|
// Setup mouse motion callback
|
|
{
|
|
var texture_view = this;
|
|
|
|
this.canvas.onclick = function(event) { texture_view.canvas_click(event); }
|
|
this.canvas.onmouseenter = function(event) { texture_view.canvas_onmousemove(event); };
|
|
this.canvas.onmousemove = function(event) { texture_view.canvas_onmousemove(event); };
|
|
this.canvas.onmousedown = function(event) { texture_view.canvas_onmousedown(event); };
|
|
this.canvas.onmouseup = function(event) { texture_view.canvas_onmouseup(event); };
|
|
this.canvas.oncontextmenu = function(event) { return false; };
|
|
|
|
document.getElementById('canvas_viewport').oncontextmenu = function(event) { return false; };
|
|
|
|
document.getElementById('canvas_outter').onclick = function(event) { texture_view.onclick_canvas_outter(); };
|
|
document.getElementById('canvas_outter').onmouseleave = function(event) { texture_view.set_select_viewport(false); };
|
|
}
|
|
|
|
if (this.subresource_desc['raw_channel_format'] == 'float')
|
|
{
|
|
update_value_selection(document.getElementById('texture_visualization_change_display_modes'), this.display_mode);
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('texture_visualization_change_display_modes').style.display = 'none';
|
|
}
|
|
|
|
// Fill out the default visualization shader code in the textarea for the user to customise.
|
|
{
|
|
var user_shader_code_dom = document.getElementById('texture_visualization_code_input');
|
|
|
|
if (this.shader_code_saving_key in g_shader_code_dict)
|
|
{
|
|
user_shader_code_dom.value = g_shader_code_dict[this.shader_code_saving_key];
|
|
}
|
|
else
|
|
{
|
|
if (!this.subresource_desc)
|
|
{
|
|
user_shader_code_dom.value = `// Sorry but ${this.resource_desc['Format']} is not supported for display :(`;
|
|
}
|
|
else
|
|
{
|
|
user_shader_code_dom.value = this.subresource_desc['webgl_pixel_shader_public'];
|
|
}
|
|
}
|
|
}
|
|
|
|
var texture_view = this;
|
|
var subresource_version_name = get_subresource_unique_version_name(this.subresource_version_info);
|
|
load_resource_binary_file(`Resources/${subresource_version_name}.bin`, function(raw_texture_data)
|
|
{
|
|
if (raw_texture_data)
|
|
{
|
|
texture_view.is_ready = true;
|
|
texture_view.raw_texture_data = raw_texture_data;
|
|
texture_view.resize_canvas(texture_view.pixel_scaling);
|
|
texture_view.process_texture_data_for_visualization();
|
|
texture_view.refresh_texture_visualization();
|
|
texture_view.onload();
|
|
}
|
|
else
|
|
{
|
|
texture_view.error(`Error: Resources/${subresource_version_name}.bin couldn't be loaded.`);
|
|
}
|
|
});
|
|
|
|
document.title = `${g_view.pass_data['EventName']} - ${this.resource_desc['Name']} ${this.subresource_version_info['subresource']}`;
|
|
}
|
|
|
|
error(error_msg)
|
|
{
|
|
console.error(error_msg);
|
|
document.getElementById('canvas_viewport').innerHTML = `
|
|
<div class="error_msg">
|
|
${error_msg}
|
|
</div>`;
|
|
document.getElementById('texture_visualization_code_input').readOnly = true;
|
|
}
|
|
|
|
image_load_uint(texel_x, texel_y)
|
|
{
|
|
console.assert(this.is_ready);
|
|
|
|
var extent = this.get_subresource_extent();
|
|
var pixel_data_offset = texel_x + (extent['y'] - 1 - texel_y) * extent['x'];
|
|
|
|
var texel_value = [0];
|
|
for (var c = 1; c < this.subresource_desc['raw_channel_count']; c++)
|
|
{
|
|
texel_value.push(0);
|
|
}
|
|
|
|
if (this.subresource_desc['webgl_src_type'] === this.gl.UNSIGNED_SHORT_5_6_5)
|
|
{
|
|
var data = new Uint16Array(this.raw_texture_data, pixel_data_offset * 2, 1);
|
|
|
|
texel_value[0] = (data[0] >> 0) & 0x1F;
|
|
texel_value[1] = (data[0] >> 5) & 0x3F;
|
|
texel_value[2] = (data[0] >> 11) & 0x1F;
|
|
}
|
|
else if (this.subresource_desc['webgl_src_type'] === this.gl.UNSIGNED_INT_10F_11F_11F_REV)
|
|
{
|
|
var data = new Uint32Array(this.raw_texture_data, pixel_data_offset * 4, 1);
|
|
|
|
texel_value[0] = (data[0] >> 0) & 0x7FF;
|
|
texel_value[1] = (data[0] >> 11) & 0x7FF;
|
|
texel_value[2] = (data[0] >> 22) & 0x3FF;
|
|
}
|
|
else if (this.subresource_desc['webgl_src_type'] === this.gl.UNSIGNED_INT_2_10_10_10_REV)
|
|
{
|
|
var data = new Uint32Array(this.raw_texture_data, pixel_data_offset * 4, 1);
|
|
|
|
texel_value[0] = (data[0] >> 0) & 0x3FF;
|
|
texel_value[1] = (data[0] >> 10) & 0x3FF;
|
|
texel_value[2] = (data[0] >> 20) & 0x3FF;
|
|
texel_value[3] = (data[0] >> 30) & 0x3;
|
|
}
|
|
else
|
|
{
|
|
var data = null;
|
|
if (this.subresource_desc['raw_channel_bit_depth'] === 8)
|
|
{
|
|
data = new Uint8Array(this.raw_texture_data, this.subresource_desc['raw_channel_count'] * pixel_data_offset * 1, this.subresource_desc['raw_channel_count']);
|
|
}
|
|
else if (this.subresource_desc['raw_channel_bit_depth'] === 16)
|
|
{
|
|
data = new Uint16Array(this.raw_texture_data, this.subresource_desc['raw_channel_count'] * pixel_data_offset * 2, this.subresource_desc['raw_channel_count']);
|
|
}
|
|
else if (this.subresource_desc['raw_channel_bit_depth'] === 32)
|
|
{
|
|
data = new Uint32Array(this.raw_texture_data, this.subresource_desc['raw_channel_count'] * pixel_data_offset * 4, this.subresource_desc['raw_channel_count']);
|
|
}
|
|
else
|
|
{
|
|
return;
|
|
}
|
|
|
|
for (var c = 0; c < this.subresource_desc['raw_channel_count']; c++)
|
|
{
|
|
texel_value[c] = data[this.subresource_desc['raw_channel_swizzling'][c]];
|
|
}
|
|
}
|
|
|
|
return texel_value;
|
|
}
|
|
|
|
decode_texel_uint(value)
|
|
{
|
|
console.assert(this.is_ready);
|
|
|
|
value = [...value];
|
|
|
|
if (this.subresource_desc['ue_pixel_format'] === 'PF_FloatRGB' || this.subresource_desc['ue_pixel_format'] === 'PF_FloatR11G11B10')
|
|
{
|
|
value[0] = decode_float11(value[0]);
|
|
value[1] = decode_float11(value[1]);
|
|
value[2] = decode_float10(value[2]);
|
|
}
|
|
else if (this.subresource_desc['ue_pixel_format'] === 'PF_A2B10G10R10')
|
|
{
|
|
value[0] = value[0] / 1023.0;
|
|
value[1] = value[1] / 1023.0;
|
|
value[2] = value[2] / 1023.0;
|
|
value[3] = value[3] / 3.0;
|
|
}
|
|
else if (this.subresource_desc['ue_pixel_format'] === 'PF_R5G6B5_UNORM')
|
|
{
|
|
value[0] = value[0] / 31.0;
|
|
value[1] = value[1] / 63.0;
|
|
value[2] = value[2] / 31.0;
|
|
}
|
|
else if (this.subresource_desc['raw_channel_format'] == 'uint')
|
|
{
|
|
// NOP
|
|
}
|
|
else if (this.subresource_desc['raw_channel_format'] == 'float')
|
|
{
|
|
for (var c = 0; c < value.length; c++)
|
|
{
|
|
if (this.subresource_desc['raw_channel_bit_depth'] == 16)
|
|
{
|
|
value[c] = decode_float16(value[c]);
|
|
}
|
|
else if (this.subresource_desc['raw_channel_bit_depth'] == 32)
|
|
{
|
|
value[c] = decode_float32(value[c]);
|
|
}
|
|
else
|
|
{
|
|
console.error('Unknown float bit depth');
|
|
}
|
|
}
|
|
}
|
|
else if (this.subresource_desc['raw_channel_format'] == 'unorm')
|
|
{
|
|
var divide = Number((BigInt(1) << BigInt(this.subresource_desc['raw_channel_bit_depth'])) - 1n);
|
|
|
|
for (var c = 0; c < value.length; c++)
|
|
{
|
|
value[c] = Number(value[c]) / divide;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
console.error('Unknown pixel format to convert');
|
|
}
|
|
|
|
return value;
|
|
}
|
|
|
|
update_texel_cursor_pos(texel_x, texel_y, parent_dom_name)
|
|
{
|
|
console.assert(this.is_ready);
|
|
|
|
var parent_dom = document.getElementById(parent_dom_name);
|
|
parent_dom.innerHTML = `<span style="width: 40px; display: inline-block; text-align: right;">${texel_x}</span> <span style="width: 40px; display: inline-block; text-align: right; margin-right: 60px;">${texel_y}</span> `;
|
|
|
|
// Find out pixel value.
|
|
{
|
|
var texel_raw = this.image_load_uint(texel_x, texel_y);
|
|
var texel_value = this.decode_texel_uint(texel_raw);
|
|
|
|
const channel_name = ['R', 'G', 'B', 'A'];
|
|
const channel_color = ['rgb(255, 38, 38)', 'rgb(38, 255, 38)', 'rgb(38, 187, 255)', 'white'];
|
|
|
|
var texel_string = [];
|
|
for (var c = 0; c < this.subresource_desc['raw_channel_count']; c++)
|
|
{
|
|
texel_string.push(`${texel_value[c].toString()} (0x${texel_raw[c].toString(16)})`);
|
|
}
|
|
|
|
if (this.subresource_version_info['subresource'] == 'stencil')
|
|
{
|
|
texel_string[0] = '0b' + texel_value[0].toString(2).padStart(8, 0);
|
|
}
|
|
|
|
var html = ``;
|
|
for (var c = 0; c < this.subresource_desc['raw_channel_count']; c++)
|
|
{
|
|
html += `<span style="margin-left: 20px; color: ${channel_color[c]};">${channel_name[c]}: <span style="min-width: 170px; display: inline-block; text-align: right;">${texel_string[c]}</span></span>`;
|
|
}
|
|
|
|
parent_dom.innerHTML += html;
|
|
}
|
|
}
|
|
|
|
get_texel_coordinate_of_mouse(event)
|
|
{
|
|
console.assert(this.is_ready);
|
|
|
|
var rect = event.target.getBoundingClientRect();
|
|
var html_x = event.clientX - rect.left;
|
|
var html_y = event.clientY - rect.top;
|
|
|
|
var texel_x = Math.floor(html_x * px_string_to_int(this.canvas.width) / px_string_to_int(this.canvas.style.width));
|
|
var texel_y = Math.floor(html_y * px_string_to_int(this.canvas.height) / px_string_to_int(this.canvas.style.height));
|
|
|
|
return [texel_x, texel_y];
|
|
}
|
|
|
|
onclick_canvas_outter()
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.set_select_viewport(true);
|
|
}
|
|
|
|
onmousewheel(event)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (this.viewport_selected == false)
|
|
{
|
|
// forward scroll event to parent
|
|
document.getElementById('main_right_pannel').scrollTop += event.deltaY;
|
|
return false;
|
|
}
|
|
|
|
var dpi = window.devicePixelRatio || 1;
|
|
var zooming_in = event.deltaY < 0.0;
|
|
|
|
var subresource_extent = this.get_subresource_extent();
|
|
|
|
// Find new pixel scaling to scale the viewport to.
|
|
var new_pixel_scaling = 0;
|
|
{
|
|
var viewport_width = (px_string_to_int(document.getElementById('canvas_viewport').style.width) - k_scroll_width) * dpi;
|
|
|
|
var min_pixel_scaling = Math.ceil(viewport_width / subresource_extent['x']);
|
|
if (min_pixel_scaling <= 1)
|
|
{
|
|
min_pixel_scaling = 1;
|
|
}
|
|
else if (min_pixel_scaling <= 2)
|
|
{
|
|
min_pixel_scaling = 2;
|
|
}
|
|
else if (min_pixel_scaling <= 4)
|
|
{
|
|
min_pixel_scaling = 4;
|
|
}
|
|
else if (min_pixel_scaling <= 8)
|
|
{
|
|
min_pixel_scaling = 8;
|
|
}
|
|
else if (min_pixel_scaling <= 16)
|
|
{
|
|
min_pixel_scaling = 16;
|
|
}
|
|
|
|
if (zooming_in)
|
|
{
|
|
if (this.pixel_scaling == 0)
|
|
{
|
|
if (min_pixel_scaling <= 16)
|
|
{
|
|
new_pixel_scaling = min_pixel_scaling;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
new_pixel_scaling = this.pixel_scaling * 2;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
if (this.pixel_scaling <= min_pixel_scaling)
|
|
{
|
|
new_pixel_scaling = 0;
|
|
}
|
|
else
|
|
{
|
|
new_pixel_scaling = this.pixel_scaling / 2;
|
|
}
|
|
}
|
|
|
|
new_pixel_scaling = Math.min(Math.max(new_pixel_scaling, 0), 16);
|
|
}
|
|
|
|
var [texel_x, texel_y] = this.get_texel_coordinate_of_mouse(event);
|
|
|
|
this.resize_canvas(new_pixel_scaling, texel_x, texel_y);
|
|
this.update_change_pixel_scaling_button();
|
|
|
|
return false;
|
|
}
|
|
|
|
update_change_pixel_scaling_button()
|
|
{
|
|
const pixel_scaling_names = {
|
|
0: 'Fit',
|
|
1: '1:1',
|
|
2: '2:1',
|
|
4: '4:1',
|
|
8: '8:1',
|
|
16: '16:1',
|
|
};
|
|
update_value_selection(document.getElementById('texture_visualization_change_pixel_scaling'), pixel_scaling_names[this.pixel_scaling]);
|
|
}
|
|
|
|
canvas_click(event)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var subresource_extent = this.get_subresource_extent();
|
|
|
|
var [texel_x, texel_y] = this.get_texel_coordinate_of_mouse(event);
|
|
|
|
texel_x = Math.min(Math.max(texel_x, 0), subresource_extent['x'] - 1);
|
|
texel_y = Math.min(Math.max(texel_y, 0), subresource_extent['y'] - 1);
|
|
|
|
this.update_texel_cursor_pos(texel_x, texel_y, 'canvas_selected_texel_info');
|
|
}
|
|
|
|
canvas_onmousemove(event)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (this.is_draging_canvas)
|
|
{
|
|
this.drag_canvas(event);
|
|
}
|
|
|
|
var subresource_extent = this.get_subresource_extent();
|
|
|
|
var [texel_x, texel_y] = this.get_texel_coordinate_of_mouse(event);
|
|
|
|
texel_x = Math.min(Math.max(texel_x, 0), subresource_extent['x'] - 1);
|
|
texel_y = Math.min(Math.max(texel_y, 0), subresource_extent['y'] - 1);
|
|
|
|
this.update_texel_cursor_pos(texel_x, texel_y, 'canvas_hover_texel_info');
|
|
}
|
|
|
|
canvas_onmousedown(event)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (event.button == 2)
|
|
{
|
|
this.set_select_viewport(true);
|
|
this.is_draging_canvas = true;
|
|
}
|
|
}
|
|
|
|
canvas_onmouseup(event)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (event.button == 2)
|
|
{
|
|
this.is_draging_canvas = false;
|
|
}
|
|
}
|
|
|
|
drag_canvas(event)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var canvas_viewport = document.getElementById('canvas_viewport');
|
|
canvas_viewport.scrollLeft -= event.movementX;
|
|
canvas_viewport.scrollTop -= event.movementY;
|
|
}
|
|
|
|
set_select_viewport(selected)
|
|
{
|
|
if (this.viewport_selected === selected)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.viewport_selected = selected;
|
|
if (this.viewport_selected)
|
|
{
|
|
var texture_view = this;
|
|
document.getElementById('main_right_pannel').onwheel = function(event) { return false; };
|
|
document.getElementById('canvas_outter').classList.add('selected');
|
|
document.getElementById('canvas_viewport').style.overflow = 'scroll';
|
|
this.canvas.onwheel = function(event) { return texture_view.onmousewheel(event); };
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('main_right_pannel').onwheel = null;
|
|
document.getElementById('canvas_outter').classList.remove('selected');
|
|
document.getElementById('canvas_viewport').style.overflow = 'hidden';
|
|
this.canvas.onwheel = null;
|
|
this.is_draging_canvas = false;
|
|
}
|
|
}
|
|
|
|
resize(ctx)
|
|
{
|
|
var dpi = window.devicePixelRatio || 1;
|
|
var viewport_width = ctx.width - 100;
|
|
var viewport_width_no_scroll = viewport_width - k_scroll_width;
|
|
|
|
var subresource_extent = this.get_subresource_extent();
|
|
var canvas_rendering_res_x = subresource_extent['x'];
|
|
var canvas_rendering_res_y = subresource_extent['y'];
|
|
|
|
var canvas_outter = document.getElementById('canvas_outter');
|
|
var canvas_viewport = document.getElementById('canvas_viewport');
|
|
canvas_outter.style.width = `${viewport_width}px`;
|
|
canvas_viewport.style.width = `${viewport_width_no_scroll + k_scroll_width}px`;
|
|
canvas_viewport.style.height = `${viewport_width_no_scroll * canvas_rendering_res_y / canvas_rendering_res_x + k_scroll_width}px`;
|
|
|
|
this.viewport_width = viewport_width;
|
|
if (this.is_ready)
|
|
{
|
|
this.resize_canvas(this.pixel_scaling);
|
|
}
|
|
}
|
|
|
|
resize_canvas(new_pixel_scaling, fix_texel_x, fix_texel_y)
|
|
{
|
|
console.assert(this.is_ready);
|
|
var dpi = window.devicePixelRatio || 1;
|
|
var viewport_width = this.viewport_width;
|
|
var viewport_width_no_scroll = viewport_width - k_scroll_width;
|
|
|
|
var canvas_viewport = document.getElementById('canvas_viewport');
|
|
var canvas_viewport_rect = canvas_viewport.getBoundingClientRect();
|
|
var viewport_height = px_string_to_int(canvas_viewport.style.height);
|
|
var viewport_height_no_scroll = viewport_height - k_scroll_width;
|
|
|
|
var subresource_extent = this.get_subresource_extent();
|
|
var canvas_rendering_res_x = subresource_extent['x'];
|
|
var canvas_rendering_res_y = subresource_extent['y'];
|
|
|
|
if (fix_texel_x === undefined || fix_texel_y === undefined)
|
|
{
|
|
fix_texel_x = canvas_rendering_res_x / 2;
|
|
fix_texel_y = canvas_rendering_res_y / 2;
|
|
}
|
|
|
|
// Compute the pixel coordinate of the fixed texel.
|
|
var fix_texel_pixel_pos_x;
|
|
var fix_texel_pixel_pos_y;
|
|
{
|
|
var rect = this.canvas.getBoundingClientRect();
|
|
|
|
fix_texel_pixel_pos_x = rect.left + rect.width * fix_texel_x / canvas_rendering_res_x - canvas_viewport_rect.left;
|
|
fix_texel_pixel_pos_y = rect.top + rect.height * fix_texel_y / canvas_rendering_res_y - canvas_viewport_rect.top;
|
|
}
|
|
|
|
// Compute new canvas dimensions
|
|
var canvas_display_w = new_pixel_scaling * canvas_rendering_res_x / dpi;
|
|
var canvas_display_h = new_pixel_scaling * canvas_rendering_res_y / dpi;
|
|
if (new_pixel_scaling == 0)
|
|
{
|
|
canvas_display_w = viewport_width_no_scroll;
|
|
canvas_display_h = viewport_width_no_scroll * canvas_rendering_res_y / canvas_rendering_res_x;
|
|
}
|
|
|
|
// Compute new canvas scroll such that the fixed texel ends up at the same pixel coordinate.
|
|
var canvas_scroll_x;
|
|
var canvas_scroll_y;
|
|
{
|
|
canvas_scroll_x = fix_texel_x * canvas_display_w / canvas_rendering_res_x - fix_texel_pixel_pos_x;
|
|
canvas_scroll_y = fix_texel_y * canvas_display_h / canvas_rendering_res_y - fix_texel_pixel_pos_y;
|
|
}
|
|
|
|
this.canvas.style.width = `${canvas_display_w}px`;
|
|
this.canvas.style.height = `${canvas_display_h}px`;
|
|
canvas_viewport.scrollLeft = canvas_scroll_x;
|
|
canvas_viewport.scrollTop = canvas_scroll_y;
|
|
this.pixel_scaling = new_pixel_scaling;
|
|
}
|
|
|
|
get_zoom_settings()
|
|
{
|
|
var subresource_extent = this.get_subresource_extent();
|
|
|
|
var canvas_viewport = document.getElementById('canvas_viewport');
|
|
|
|
var zoom_settings = {
|
|
'subresource_extent_x': subresource_extent['x'],
|
|
'subresource_extent_y': subresource_extent['y'],
|
|
'pixel_scaling': this.pixel_scaling,
|
|
'canvas_width': this.canvas.style.width,
|
|
'canvas_height': this.canvas.style.height,
|
|
'canvas_viewport_scoll_left': canvas_viewport.scrollLeft,
|
|
'canvas_viewport_scoll_top': canvas_viewport.scrollTop,
|
|
};
|
|
return zoom_settings;
|
|
}
|
|
|
|
is_zoom_settings_compatible(zoom_settings)
|
|
{
|
|
var subresource_extent = this.get_subresource_extent();
|
|
|
|
return (zoom_settings['subresource_extent_x'] == subresource_extent['x'] && zoom_settings['subresource_extent_y'] == subresource_extent['y']);
|
|
}
|
|
|
|
apply_zoom_settings(zoom_settings)
|
|
{
|
|
var canvas_viewport = document.getElementById('canvas_viewport');
|
|
|
|
this.pixel_scaling = zoom_settings['pixel_scaling'];
|
|
this.canvas.style.width = zoom_settings['canvas_width'];
|
|
this.canvas.style.height = zoom_settings['canvas_height'];
|
|
canvas_viewport.scrollLeft = zoom_settings['canvas_viewport_scoll_left'];
|
|
canvas_viewport.scrollTop = zoom_settings['canvas_viewport_scoll_top'];
|
|
|
|
this.update_change_pixel_scaling_button();
|
|
}
|
|
|
|
init_gl()
|
|
{
|
|
var gl_ctx_attributes = {
|
|
antialias: false,
|
|
depth: false
|
|
};
|
|
|
|
// Init WebGL 2.0
|
|
this.canvas = document.getElementById('texture_visualization_canvas');
|
|
|
|
var gl_ctx_attributes = {
|
|
alpha: false,
|
|
// premultipliedAlpha: true, // TODO
|
|
antialias: false,
|
|
depth: false,
|
|
stencil: false,
|
|
powerPreference: "low-power",
|
|
preserveDrawingBuffer: true,
|
|
xrCompatible: false,
|
|
};
|
|
|
|
var gl = this.canvas.getContext('webgl2', gl_ctx_attributes);
|
|
this.gl = gl;
|
|
|
|
// Init WebGL extensions
|
|
{
|
|
var available_extensions = this.gl.getSupportedExtensions();
|
|
var required_extensions = ['EXT_texture_norm16'];
|
|
|
|
this.gl_ext = {};
|
|
|
|
var gl = this.gl;
|
|
var gl_ext = this.gl_ext;
|
|
required_extensions.forEach(function(ext_name)
|
|
{
|
|
gl_ext[ext_name] = gl.getExtension(ext_name);
|
|
});
|
|
}
|
|
|
|
// Set unpacking alignement to 1 to allow uploading texture size not multple of 4
|
|
gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1);
|
|
|
|
// Create vertex buffer
|
|
{
|
|
var vertices = [
|
|
-1.0,+1.0,0.0,
|
|
-1.0,-1.0,0.0,
|
|
+1.0,-1.0,0.0,
|
|
+1.0,+1.0,0.0,
|
|
];
|
|
|
|
this.gl_vertex_buffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.gl_vertex_buffer);
|
|
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, null);
|
|
}
|
|
|
|
// Create vertex buffer
|
|
{
|
|
var indices = [0, 1, 2, 2, 0, 3];
|
|
|
|
this.gl_index_buffer = gl.createBuffer();
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.gl_index_buffer);
|
|
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, null);
|
|
}
|
|
|
|
// Create simple shader program for NaN display mode
|
|
{
|
|
var frag_code = `
|
|
uniform sampler2D texture0;
|
|
|
|
in vec2 uv;
|
|
out vec4 display;
|
|
|
|
void main(void) {
|
|
ivec2 texel_coord = ivec2(uv * vec2(textureSize(texture0, 0)));
|
|
display = texelFetch(texture0, texel_coord, 0);
|
|
}`;
|
|
this.gl_simple_program = this.compile_screen_shader_program(frag_code);
|
|
}
|
|
|
|
// Create simple shader program for NaN display mode
|
|
{
|
|
var frag_code = `
|
|
uniform sampler2D texture0;
|
|
|
|
in vec2 uv;
|
|
out vec4 display;
|
|
|
|
void main(void)
|
|
{
|
|
ivec2 texel_coord = ivec2(uv * vec2(textureSize(texture0, 0)));
|
|
vec4 raw = texelFetch(texture0, texel_coord, 0);
|
|
|
|
display.r = (isnan(raw.r) || isnan(raw.g) || isnan(raw.b) || isnan(raw.a)) ? 1.0 : 0.0;
|
|
display.g = 0.0;
|
|
display.b = 0.0;
|
|
display.a = 1.0;
|
|
}`;
|
|
this.gl_nan_program = this.compile_screen_shader_program(frag_code);
|
|
}
|
|
|
|
// Create simple shader program for Inf display mode
|
|
{
|
|
var frag_code = `
|
|
uniform sampler2D texture0;
|
|
|
|
in vec2 uv;
|
|
out vec4 display;
|
|
|
|
void main(void)
|
|
{
|
|
ivec2 texel_coord = ivec2(uv * vec2(textureSize(texture0, 0)));
|
|
vec4 raw = texelFetch(texture0, texel_coord, 0);
|
|
|
|
display.r = (isinf(raw.r) || isinf(raw.g) || isinf(raw.b) || isinf(raw.a)) ? 1.0 : 0.0;
|
|
display.g = 0.0;
|
|
display.b = 0.0;
|
|
display.a = 1.0;
|
|
}`;
|
|
this.gl_inf_program = this.compile_screen_shader_program(frag_code);
|
|
}
|
|
}
|
|
|
|
release_gl()
|
|
{
|
|
this.canvas = null;
|
|
this.gl = null;
|
|
this.gl_ext = null;
|
|
this.gl_vertex_buffer = null;
|
|
this.gl_index_buffer = null;
|
|
this.gl_simple_program = null;
|
|
this.gl_nan_program = null;
|
|
this.gl_textures = null;
|
|
}
|
|
|
|
release()
|
|
{
|
|
this.is_ready = false;
|
|
this.raw_texture_data = null;
|
|
this.release_gl();
|
|
this.set_select_viewport(false);
|
|
}
|
|
|
|
shader_user_code_change()
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.refresh_texture_visualization();
|
|
}
|
|
|
|
copy_canvas_to_clipboard()
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var texture_view = this;
|
|
this.canvas.toBlob(function(image_blob) {
|
|
var pass_data = g_view.pass_data;
|
|
|
|
var is_output_resource = pass_data['OutputResources'].includes(get_subresource_unique_name(texture_view.subresource_version_info));
|
|
|
|
var text = '';
|
|
text += `Dump:\n\t${g_infos['Project']} - ${g_infos['Platform']} - ${g_infos['RHI']} - ${g_infos['BuildVersion']} - ${g_infos['DumpTime']}\n\t${get_current_navigation()}\n`
|
|
text += `Pass:\n\t${pass_data['EventName']}\n`;
|
|
|
|
{
|
|
var name = prettify_subresource_unique_name(texture_view.subresource_version_info, texture_view.resource_desc);
|
|
text += `${is_output_resource ? 'Output' : 'Input'} resource:\n\t${name}\n`;
|
|
}
|
|
|
|
if (texture_view.subresource_version_info['draw'] >= 0)
|
|
{
|
|
text += `Draw ${texture_view.subresource_version_info['draw']}:\n\t${g_view.pass_draws_data[texture_view.subresource_version_info['draw']]['DrawName']}\n`;
|
|
}
|
|
|
|
var text_blob = new Blob([text], { type: 'text/plain' });
|
|
var clipboard_data = {
|
|
[text_blob.type]: text_blob,
|
|
[image_blob.type]: image_blob,
|
|
};
|
|
|
|
navigator.clipboard.write([new ClipboardItem(clipboard_data)]);
|
|
}, 'image/png');
|
|
}
|
|
|
|
get shader_code_saving_key()
|
|
{
|
|
var name = '';
|
|
if (this.resource_desc['Name'])
|
|
{
|
|
name = this.resource_desc['Name'];
|
|
}
|
|
else
|
|
{
|
|
name = this.subresource_version_info['resource'];
|
|
}
|
|
|
|
if (this.subresource_version_info['subresource'] && !this.subresource_version_info['subresource'].startsWith('mip'))
|
|
{
|
|
name = `${name}.${this.subresource_version_info['subresource']}`;
|
|
}
|
|
|
|
return name;
|
|
}
|
|
|
|
get_default_texture_shader_code()
|
|
{
|
|
if (this.shader_code_saving_key in g_shader_code_dict)
|
|
{
|
|
return g_shader_code_dict[this.shader_code_saving_key];
|
|
}
|
|
|
|
if (!this.subresource_desc)
|
|
{
|
|
return `// Sorry but ${this.resource_desc['Format']} is not supported for display :(`;
|
|
}
|
|
|
|
return this.subresource_desc['webgl_pixel_shader'];
|
|
}
|
|
|
|
translate_subresource_desc()
|
|
{
|
|
var gl = this.gl;
|
|
var ue_pixel_format = this.resource_desc['Format'];
|
|
|
|
// Missing formats:
|
|
//PF_R8G8B8A8_SNORM
|
|
//PF_R16G16B16A16_UNORM
|
|
//PF_R16G16B16A16_SNORN
|
|
|
|
if (this.resource_desc['NumSamples'] > 1)
|
|
{
|
|
this.error(`MSAA is not supported for visualization.`);
|
|
return null;
|
|
}
|
|
|
|
var webgl_texture_internal_format = null;
|
|
var webgl_texture_src_format = null;
|
|
var webgl_texture_src_type = null;
|
|
var webgl_texture_count = 1;
|
|
var raw_channel_swizzling = [0, 1, 2, 3];
|
|
var raw_channel_bit_depth = 0;
|
|
var raw_channel_count = 0;
|
|
var raw_channel_format = 'exotic';
|
|
|
|
// 32bit floats
|
|
if (ue_pixel_format === 'PF_A32B32G32R32F')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA32F;
|
|
webgl_texture_src_format = gl.RGBA;
|
|
webgl_texture_src_type = gl.FLOAT;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'float';
|
|
}
|
|
else if (ue_pixel_format === 'PF_G32R32F')
|
|
{
|
|
webgl_texture_internal_format = gl.RG32F;
|
|
webgl_texture_src_format = gl.RG;
|
|
webgl_texture_src_type = gl.FLOAT;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 2;
|
|
raw_channel_format = 'float';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R32_FLOAT' || ue_pixel_format === 'PF_BC4')
|
|
{
|
|
webgl_texture_internal_format = gl.R32F;
|
|
webgl_texture_src_format = gl.RED;
|
|
webgl_texture_src_type = gl.FLOAT;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'float';
|
|
}
|
|
// 16bit floats
|
|
else if (ue_pixel_format === 'PF_FloatRGBA' || ue_pixel_format === 'PF_BC6H' || ue_pixel_format === 'PF_BC7')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA16F;
|
|
webgl_texture_src_format = gl.RGBA;
|
|
webgl_texture_src_type = gl.HALF_FLOAT;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'float';
|
|
}
|
|
else if (ue_pixel_format === 'PF_G16R16F' || ue_pixel_format === 'PF_G16R16F_FILTER' || ue_pixel_format === 'PF_BC5')
|
|
{
|
|
webgl_texture_internal_format = gl.RG16F;
|
|
webgl_texture_src_format = gl.RG;
|
|
webgl_texture_src_type = gl.HALF_FLOAT;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 2;
|
|
raw_channel_format = 'float';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R16F' || ue_pixel_format === 'PF_R16F_FILTER')
|
|
{
|
|
webgl_texture_internal_format = gl.R16F;
|
|
webgl_texture_src_format = gl.RED;
|
|
webgl_texture_src_type = gl.HALF_FLOAT;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'float';
|
|
}
|
|
// 16bit unorms
|
|
else if (ue_pixel_format === 'PF_A16B16G16R16')
|
|
{
|
|
webgl_texture_internal_format = this.gl_ext['EXT_texture_norm16'].RGBA16_EXT;
|
|
webgl_texture_src_format = gl.RGBA;
|
|
webgl_texture_src_type = gl.UNSIGNED_SHORT;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
else if (ue_pixel_format === 'PF_G16R16')
|
|
{
|
|
webgl_texture_internal_format = this.gl_ext['EXT_texture_norm16'].RG16_EXT;
|
|
webgl_texture_src_format = gl.RG;
|
|
webgl_texture_src_type = gl.UNSIGNED_SHORT;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 2;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
else if (ue_pixel_format === 'PF_G16')
|
|
{
|
|
webgl_texture_internal_format = this.gl_ext['EXT_texture_norm16'].R16_EXT;
|
|
webgl_texture_src_format = gl.RED;
|
|
webgl_texture_src_type = gl.UNSIGNED_SHORT;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
// 8bit unorms
|
|
else if (ue_pixel_format === 'PF_B8G8R8A8' || ue_pixel_format === 'PF_R8G8B8A8')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA;
|
|
webgl_texture_src_format = gl.RGBA;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
raw_channel_bit_depth = 8;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'unorm';
|
|
|
|
if (ue_pixel_format === 'PF_B8G8R8A8' && g_infos['RHI'] !== 'OpenGL')
|
|
{
|
|
raw_channel_swizzling = [2, 1, 0, 3];
|
|
}
|
|
}
|
|
else if (ue_pixel_format === 'PF_R8G8')
|
|
{
|
|
webgl_texture_internal_format = gl.RG8;
|
|
webgl_texture_src_format = gl.RG;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
raw_channel_bit_depth = 8;
|
|
raw_channel_count = 2;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R8' || ue_pixel_format === 'PF_G8' || ue_pixel_format === 'PF_A8' || ue_pixel_format === 'PF_L8')
|
|
{
|
|
webgl_texture_internal_format = gl.R8;
|
|
webgl_texture_src_format = gl.RED;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
raw_channel_bit_depth = 8;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
// 32bit uint
|
|
else if (ue_pixel_format === 'PF_R32_UINT' || ue_pixel_format === 'PF_R32_SINT')
|
|
{
|
|
webgl_texture_internal_format = gl.R8UI;
|
|
webgl_texture_src_format = gl.RED_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
webgl_texture_count = 4;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R32G32B32A32_UINT')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA8UI;
|
|
webgl_texture_src_format = gl.RGBA_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
webgl_texture_count = 4;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R32G32_UINT')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA8UI;
|
|
webgl_texture_src_format = gl.RGBA_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
webgl_texture_count = 4;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 2;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
// 16bit uint
|
|
else if (ue_pixel_format === 'PF_R16_UINT' || ue_pixel_format === 'PF_R16_SINT')
|
|
{
|
|
webgl_texture_internal_format = gl.R8UI;
|
|
webgl_texture_src_format = gl.RED_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
webgl_texture_count = 2;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R16G16B16A16_UINT' || ue_pixel_format === 'PF_R16G16B16A16_SINT')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA8UI;
|
|
webgl_texture_src_format = gl.RGBA_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
webgl_texture_count = 2;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R16G16_UINT')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA8UI;
|
|
webgl_texture_src_format = gl.RGBA_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
webgl_texture_count = 2;
|
|
raw_channel_bit_depth = 16;
|
|
raw_channel_count = 2;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
// 8bit uint
|
|
else if (ue_pixel_format === 'PF_R8G8B8A8_UINT')
|
|
{
|
|
webgl_texture_internal_format = gl.RGBA8UI;
|
|
webgl_texture_src_format = gl.RGBA_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
raw_channel_bit_depth = 8;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R8_UINT')
|
|
{
|
|
webgl_texture_internal_format = gl.R8UI;
|
|
webgl_texture_src_format = gl.RED_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
raw_channel_bit_depth = 8;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
// exotic bit depth
|
|
else if (ue_pixel_format === 'PF_FloatRGB' || ue_pixel_format === 'PF_FloatR11G11B10')
|
|
{
|
|
webgl_texture_internal_format = gl.R11F_G11F_B10F;
|
|
webgl_texture_src_format = gl.RGB;
|
|
webgl_texture_src_type = gl.UNSIGNED_INT_10F_11F_11F_REV;
|
|
raw_channel_bit_depth = k_exotic_raw_channel_bit_depth;
|
|
raw_channel_count = 3;
|
|
raw_channel_format = 'float';
|
|
}
|
|
else if (ue_pixel_format === 'PF_A2B10G10R10')
|
|
{
|
|
webgl_texture_internal_format = gl.RGB10_A2;
|
|
webgl_texture_src_format = gl.RGBA;
|
|
webgl_texture_src_type = gl.UNSIGNED_INT_2_10_10_10_REV;
|
|
raw_channel_bit_depth = k_exotic_raw_channel_bit_depth;
|
|
raw_channel_count = 4;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
else if (ue_pixel_format === 'PF_R5G6B5_UNORM')
|
|
{
|
|
webgl_texture_internal_format = gl.RGB565;
|
|
webgl_texture_src_format = gl.RGB;
|
|
webgl_texture_src_type = gl.UNSIGNED_SHORT_5_6_5;
|
|
raw_channel_bit_depth = k_exotic_raw_channel_bit_depth;
|
|
raw_channel_count = 3;
|
|
raw_channel_format = 'unorm';
|
|
}
|
|
// depth stencil
|
|
else if (ue_pixel_format === 'PF_DepthStencil' || ue_pixel_format === 'PF_ShadowDepth' || ue_pixel_format === 'PF_D24')
|
|
{
|
|
if (this.subresource_version_info['subresource'] == 'stencil')
|
|
{
|
|
webgl_texture_internal_format = gl.R8UI;
|
|
webgl_texture_src_format = gl.RED_INTEGER;
|
|
webgl_texture_src_type = gl.UNSIGNED_BYTE;
|
|
raw_channel_bit_depth = 8;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'uint';
|
|
}
|
|
else
|
|
{
|
|
webgl_texture_internal_format = gl.R32F;
|
|
webgl_texture_src_format = gl.RED;
|
|
webgl_texture_src_type = gl.FLOAT;
|
|
raw_channel_bit_depth = 32;
|
|
raw_channel_count = 1;
|
|
raw_channel_format = 'float';
|
|
}
|
|
}
|
|
else
|
|
{
|
|
this.error(`Pixel format ${ue_pixel_format} is not supported for visualization.`);
|
|
return null;
|
|
}
|
|
|
|
var shader_float_vector = [null, 'float', 'vec2', 'vec3', 'vec4'];
|
|
|
|
var shader_sampler_type = 'sampler2D';
|
|
var shader_sampler_return_type = shader_float_vector;
|
|
var shader_display_operation = 'texel';
|
|
if (webgl_texture_src_format === gl.RED_INTEGER || webgl_texture_src_format === gl.RG_INTEGER || webgl_texture_src_format === gl.RGBA_INTEGER)
|
|
{
|
|
var divide = (BigInt(1) << BigInt(raw_channel_bit_depth)) - 1n;
|
|
shader_sampler_type = 'usampler2D';
|
|
shader_sampler_return_type = [null, 'uint', 'uvec2', 'uvec3', 'uvec4'];
|
|
shader_display_operation = `${shader_float_vector[raw_channel_count]}(${shader_display_operation}) / ${divide}.0`;
|
|
}
|
|
|
|
var webgl_channel_count = 0;
|
|
if (webgl_texture_src_format === gl.RED || webgl_texture_src_format === gl.RED_INTEGER)
|
|
{
|
|
webgl_channel_count = 1;
|
|
}
|
|
else if (webgl_texture_src_format === gl.RG)
|
|
{
|
|
webgl_channel_count = 2;
|
|
}
|
|
else if (webgl_texture_src_format === gl.RGB)
|
|
{
|
|
webgl_channel_count = 3;
|
|
}
|
|
else if (webgl_texture_src_format === gl.RGBA || webgl_texture_src_format === gl.RGBA_INTEGER)
|
|
{
|
|
webgl_channel_count = 4;
|
|
}
|
|
|
|
var webgl_pixel_shader_private = ``;
|
|
|
|
var shader_fetch_operation = '(\n';
|
|
for (var i = 0; i < webgl_texture_count; i++)
|
|
{
|
|
webgl_pixel_shader_private += `uniform ${shader_sampler_type} texture${i};\n`;
|
|
|
|
shader_fetch_operation += `\t\t(texelFetch(texture${i}, texel_coord, 0) << ${8 * i})`;
|
|
if (i + 1 == webgl_texture_count)
|
|
{
|
|
shader_fetch_operation += `)`;
|
|
}
|
|
else
|
|
{
|
|
shader_fetch_operation += ` |\n`;
|
|
}
|
|
}
|
|
|
|
if (webgl_texture_count == 1)
|
|
{
|
|
shader_fetch_operation = `texelFetch(texture0, texel_coord , 0)`;
|
|
}
|
|
|
|
const k_get_n_channels = new Array(
|
|
'',
|
|
'.r',
|
|
'.rg',
|
|
'.rgb',
|
|
'.rgba'
|
|
);
|
|
|
|
var shader_display_assignment = `display${k_get_n_channels[raw_channel_count]}`;
|
|
|
|
webgl_pixel_shader_private += `
|
|
${shader_sampler_return_type[raw_channel_count]} fetchTexel(vec2 uv)
|
|
{
|
|
ivec2 texel_coord = ivec2(uv * vec2(textureSize(texture0, 0)));
|
|
${shader_sampler_return_type[4]} raw = ${shader_fetch_operation};
|
|
return raw${k_get_n_channels[raw_channel_count]};
|
|
}
|
|
|
|
in vec2 uv;
|
|
out vec4 display;
|
|
`;
|
|
|
|
var webgl_pixel_shader_public = `// WebGL 2.0 visualization shader for a ${ue_pixel_format} ${this.subresource_version_info['subresource']}
|
|
|
|
${shader_sampler_return_type[raw_channel_count]} texel = fetchTexel(uv);
|
|
${shader_display_assignment} = ${shader_display_operation};`;
|
|
|
|
var gl_format = {};
|
|
gl_format['webgl_internal_format'] = webgl_texture_internal_format;
|
|
gl_format['webgl_src_format'] = webgl_texture_src_format;
|
|
gl_format['webgl_src_type'] = webgl_texture_src_type;
|
|
gl_format['webgl_texture_count'] = webgl_texture_count;
|
|
gl_format['webgl_pixel_shader_public'] = webgl_pixel_shader_public;
|
|
gl_format['webgl_pixel_shader_private'] = webgl_pixel_shader_private;
|
|
gl_format['webgl_channel_count'] = webgl_channel_count;
|
|
gl_format['raw_channel_swizzling'] = raw_channel_swizzling;
|
|
gl_format['raw_channel_bit_depth'] = raw_channel_bit_depth;
|
|
gl_format['raw_channel_count'] = raw_channel_count;
|
|
gl_format['raw_channel_format'] = raw_channel_format;
|
|
gl_format['ue_pixel_format'] = ue_pixel_format;
|
|
|
|
return gl_format;
|
|
}
|
|
|
|
change_pixel_scaling(pixel_scaling_button)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
const pixel_scalings = {
|
|
'Fit': 0,
|
|
'1:1': 1,
|
|
'2:1': 2,
|
|
'4:1': 4,
|
|
'8:1': 8,
|
|
'16:1': 16,
|
|
};
|
|
this.resize_canvas(pixel_scalings[pixel_scaling_button.value]);
|
|
update_value_selection(document.getElementById('texture_visualization_change_pixel_scaling'), pixel_scaling_button.value);
|
|
}
|
|
|
|
change_display_mode(new_mode)
|
|
{
|
|
if (!this.is_ready)
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (new_mode.value == this.display_mode)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.display_mode = new_mode.value;
|
|
|
|
update_value_selection(document.getElementById('texture_visualization_change_display_modes'), this.display_mode);
|
|
|
|
if (this.display_mode == 'Visualization')
|
|
{
|
|
document.getElementById('texture_visualization_code_input').readOnly = false;
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('texture_visualization_code_input').readOnly = true;
|
|
}
|
|
|
|
this.refresh_texture_visualization();
|
|
}
|
|
|
|
get_subresource_extent()
|
|
{
|
|
var extent = {};
|
|
extent['x'] = this.resource_desc['ExtentX'];
|
|
extent['y'] = this.resource_desc['ExtentY'];
|
|
|
|
if (this.subresource_version_info['subresource'].startsWith('mip'))
|
|
{
|
|
var mip_id = Number(this.subresource_version_info['subresource'].substring(3));
|
|
|
|
for (var i = 0; i < mip_id; i++)
|
|
{
|
|
extent['x'] = Math.floor(extent['x'] / 2);
|
|
extent['y'] = Math.floor(extent['y'] / 2);
|
|
}
|
|
}
|
|
|
|
return extent;
|
|
}
|
|
|
|
create_gl_texture(webgl_internal_format, webgl_src_format, webgl_src_type, extent, converted_data)
|
|
{
|
|
console.assert(this.is_ready);
|
|
var gl = this.gl;
|
|
|
|
var texture = gl.createTexture();
|
|
gl.activeTexture(gl.TEXTURE0);
|
|
gl.bindTexture(gl.TEXTURE_2D, texture);
|
|
gl.texImage2D(
|
|
gl.TEXTURE_2D,
|
|
/* level = */ 0,
|
|
webgl_internal_format,
|
|
extent['x'],
|
|
extent['y'],
|
|
/* border = */ 0,
|
|
webgl_src_format,
|
|
webgl_src_type,
|
|
converted_data);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
|
|
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
|
|
gl.bindTexture(gl.TEXTURE_2D, null);
|
|
|
|
return texture;
|
|
}
|
|
|
|
process_texture_data_for_visualization()
|
|
{
|
|
console.assert(this.is_ready);
|
|
var gl = this.gl;
|
|
|
|
if (this.raw_texture_data === null)
|
|
{
|
|
console.error(`failed to load ${get_subresource_unique_version_name(this.subresource_version_info)}`);
|
|
return null;
|
|
}
|
|
|
|
var extent = this.get_subresource_extent();
|
|
var webgl_array_size = this.subresource_desc['webgl_channel_count'] * extent['x'] * extent['y'];
|
|
|
|
// Reset the gl textures
|
|
this.gl_textures = [];
|
|
|
|
// Exotic pixel format
|
|
if (this.subresource_desc['raw_channel_bit_depth'] == k_exotic_raw_channel_bit_depth)
|
|
{
|
|
var gl = this.gl;
|
|
var original_converted_data = null;
|
|
if (this.subresource_desc['webgl_src_type'] === gl.UNSIGNED_SHORT_5_6_5)
|
|
{
|
|
original_converted_data = new Uint16Array(this.raw_texture_data);
|
|
}
|
|
else if (this.subresource_desc['webgl_src_type'] === gl.UNSIGNED_INT_10F_11F_11F_REV || this.subresource_desc['webgl_src_type'] === gl.UNSIGNED_INT_2_10_10_10_REV)
|
|
{
|
|
original_converted_data = new Uint32Array(this.raw_texture_data);
|
|
}
|
|
else
|
|
{
|
|
return null;
|
|
}
|
|
|
|
var texture = this.create_gl_texture(this.subresource_desc['webgl_internal_format'], this.subresource_desc['webgl_src_format'], this.subresource_desc['webgl_src_type'], extent, original_converted_data);
|
|
this.gl_textures.push(texture);
|
|
}
|
|
else if (this.subresource_desc['webgl_texture_count'] > 1)
|
|
{
|
|
var original_converted_data = null;
|
|
if (this.subresource_desc['raw_channel_bit_depth'] === 8)
|
|
{
|
|
original_converted_data = new Uint8Array(this.raw_texture_data);
|
|
}
|
|
else if (this.subresource_desc['raw_channel_bit_depth'] === 16)
|
|
{
|
|
original_converted_data = new Uint16Array(this.raw_texture_data);
|
|
}
|
|
else if (this.subresource_desc['raw_channel_bit_depth'] === 32)
|
|
{
|
|
original_converted_data = new Uint32Array(this.raw_texture_data);
|
|
}
|
|
else
|
|
{
|
|
return null;
|
|
}
|
|
|
|
for (var tex_id = 0; tex_id < this.subresource_desc['webgl_texture_count']; tex_id++)
|
|
{
|
|
var converted_data = new Uint8Array(webgl_array_size);
|
|
|
|
for (var y = 0; y < extent['y']; y++)
|
|
{
|
|
for (var x = 0; x < extent['x']; x++)
|
|
{
|
|
for (var c = 0; c < this.subresource_desc['webgl_channel_count']; c++)
|
|
{
|
|
var texel_offset = x + extent['x'] * y;
|
|
|
|
var value = 0;
|
|
if (c < this.subresource_desc['raw_channel_count'])
|
|
{
|
|
var src = original_converted_data[texel_offset * this.subresource_desc['raw_channel_count'] + this.subresource_desc['raw_channel_swizzling'][c]];
|
|
value = (src >> (8 * tex_id)) % 256;
|
|
}
|
|
converted_data[texel_offset * this.subresource_desc['webgl_channel_count'] + c] = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
var texture = this.create_gl_texture(this.subresource_desc['webgl_internal_format'], this.subresource_desc['webgl_src_format'], this.subresource_desc['webgl_src_type'], extent, converted_data);
|
|
this.gl_textures.push(texture);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
var gl = this.gl;
|
|
var converted_data = null;
|
|
var original_converted_data = null;
|
|
if (this.subresource_desc['webgl_src_type'] === gl.UNSIGNED_BYTE)
|
|
{
|
|
original_converted_data = new Uint8Array(this.raw_texture_data);
|
|
converted_data = new Uint8Array(webgl_array_size);
|
|
}
|
|
else if (this.subresource_desc['webgl_src_type'] === gl.UNSIGNED_SHORT || this.subresource_desc['webgl_src_type'] === gl.HALF_FLOAT)
|
|
{
|
|
original_converted_data = new Uint16Array(this.raw_texture_data);
|
|
converted_data = new Uint16Array(webgl_array_size);
|
|
}
|
|
else if (this.subresource_desc['webgl_src_type'] === gl.FLOAT)
|
|
{
|
|
original_converted_data = new Float32Array(this.raw_texture_data);
|
|
converted_data = new Float32Array(webgl_array_size);
|
|
}
|
|
else
|
|
{
|
|
return null;
|
|
}
|
|
|
|
for (var y = 0; y < extent['y']; y++)
|
|
{
|
|
for (var x = 0; x < extent['x']; x++)
|
|
{
|
|
for (var c = 0; c < this.subresource_desc['webgl_channel_count']; c++)
|
|
{
|
|
var i = this.subresource_desc['webgl_channel_count'] * (x + extent['x'] * y);
|
|
|
|
var value = 0;
|
|
if (c < this.subresource_desc['raw_channel_count'])
|
|
{
|
|
value = original_converted_data[i + this.subresource_desc['raw_channel_swizzling'][c]];
|
|
}
|
|
converted_data[i + c] = value;
|
|
}
|
|
}
|
|
}
|
|
|
|
var texture = this.create_gl_texture(this.subresource_desc['webgl_internal_format'], this.subresource_desc['webgl_src_format'], this.subresource_desc['webgl_src_type'], extent, converted_data);
|
|
this.gl_textures.push(texture);
|
|
}
|
|
}
|
|
|
|
compile_screen_shader_program(frag_code)
|
|
{
|
|
var gl = this.gl;
|
|
|
|
//console.log(frag_code);
|
|
|
|
const shader_std = `#version 300 es
|
|
|
|
precision highp float;
|
|
precision highp int;
|
|
precision highp sampler2D;
|
|
precision highp usampler2D;
|
|
|
|
struct FloatInfos
|
|
{
|
|
bool is_denormal;
|
|
bool is_infinity;
|
|
bool is_nan;
|
|
};
|
|
|
|
FloatInfos decodeFloat(float x)
|
|
{
|
|
const uint mantissa_bit_count = 23u;
|
|
const uint exp_bit_count = 8u;
|
|
|
|
uint raw = floatBitsToUint(x);
|
|
|
|
uint sign_bit = (raw >> (mantissa_bit_count + exp_bit_count)) & 0x1u;
|
|
uint mantissa_bits = (raw >> 0u) & ((0x1u << mantissa_bit_count) - 1u);
|
|
uint exp_bits = (raw >> mantissa_bit_count) & ((0x1u << exp_bit_count) - 1u);
|
|
|
|
bool is_max_exp = exp_bits == ((0x1u << exp_bit_count) - 1u);
|
|
|
|
FloatInfos infos;
|
|
infos.is_denormal = exp_bits == 0u;
|
|
infos.is_infinity = is_max_exp && mantissa_bits == 0u;
|
|
infos.is_nan = is_max_exp && mantissa_bits != 0u;
|
|
|
|
return infos;
|
|
}
|
|
|
|
#define isnan(x) decodeFloat(x).is_nan
|
|
#define isinf(x) decodeFloat(x).is_infinity
|
|
#define isdenorm(x) decodeFloat(x).is_denormal
|
|
|
|
`;
|
|
|
|
var vert_code = `
|
|
in vec3 coordinates;
|
|
out highp vec2 uv;
|
|
void main(void) {
|
|
gl_Position = vec4(coordinates, 1.0);
|
|
uv = coordinates.xy * 0.5 + 0.5;
|
|
}`;
|
|
|
|
var vert_shader = gl.createShader(gl.VERTEX_SHADER);
|
|
{
|
|
gl.shaderSource(vert_shader, shader_std + vert_code);
|
|
gl.compileShader(vert_shader);
|
|
|
|
var compilation_status = gl.getShaderParameter(vert_shader, gl.COMPILE_STATUS);
|
|
if (!compilation_status)
|
|
{
|
|
var compilation_log = gl.getShaderInfoLog(vert_shader);
|
|
console.error('Fragment shader compiler log: ' + compilation_log);
|
|
return null;
|
|
}
|
|
}
|
|
|
|
var frag_shader = gl.createShader(gl.FRAGMENT_SHADER);
|
|
{
|
|
gl.shaderSource(frag_shader, shader_std + frag_code);
|
|
gl.compileShader(frag_shader);
|
|
|
|
var compilation_status = gl.getShaderParameter(frag_shader, gl.COMPILE_STATUS);
|
|
if (!compilation_status)
|
|
{
|
|
var compilation_log = gl.getShaderInfoLog(frag_shader);
|
|
console.log(frag_code);
|
|
console.error('Fragment shader compiler log: ' + compilation_log);
|
|
document.getElementById('texture_visualization_code_log').value = 'Compilation failed:\n' + compilation_log;
|
|
return null;
|
|
}
|
|
}
|
|
|
|
var shader_program = gl.createProgram();
|
|
{
|
|
gl.attachShader(shader_program, vert_shader);
|
|
gl.attachShader(shader_program, frag_shader);
|
|
gl.linkProgram(shader_program);
|
|
|
|
var link_status = gl.getProgramParameter(shader_program, gl.LINK_STATUS);
|
|
if (!link_status)
|
|
{
|
|
var link_log = gl.getProgramInfoLog(shader_program);
|
|
console.error('Program compiler log: ' + link_log);
|
|
document.getElementById('texture_visualization_code_log').value = 'Link failed:\n' + link_log;
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('texture_visualization_code_log').value = 'Compilation succeeded';
|
|
}
|
|
}
|
|
return shader_program;
|
|
}
|
|
|
|
refresh_texture_visualization()
|
|
{
|
|
console.assert(this.is_ready);
|
|
console.assert(this.gl_textures);
|
|
|
|
var shader_program = null;
|
|
if (this.display_mode == 'NaN')
|
|
{
|
|
shader_program = this.gl_nan_program;
|
|
}
|
|
else if (this.display_mode == 'Inf')
|
|
{
|
|
shader_program = this.gl_inf_program;
|
|
}
|
|
else
|
|
{
|
|
var user_frag_code = document.getElementById('texture_visualization_code_input').value;
|
|
shader_program = this.compile_screen_shader_program(this.subresource_desc['webgl_pixel_shader_private'] + 'void main(void) { display = vec4(0.0, 0.0, 0.0, 0.0);\n' + user_frag_code + `\n}`);
|
|
|
|
if (!shader_program)
|
|
{
|
|
return;
|
|
}
|
|
|
|
// Save the user code if compilation have succeeded.
|
|
g_shader_code_dict[this.shader_code_saving_key] = user_frag_code;
|
|
}
|
|
|
|
var gl = this.gl;
|
|
gl.clearColor(0.0, 0.0, 0.0, 1.0);
|
|
gl.clear(gl.COLOR_BUFFER_BIT);
|
|
|
|
{
|
|
gl.useProgram(shader_program);
|
|
gl.bindBuffer(gl.ARRAY_BUFFER, this.gl_vertex_buffer);
|
|
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, this.gl_index_buffer);
|
|
|
|
var coord = gl.getAttribLocation(shader_program, "coordinates");
|
|
gl.vertexAttribPointer(coord, 3, gl.FLOAT, false, 0, 0);
|
|
gl.enableVertexAttribArray(coord);
|
|
|
|
for (var tex_id = 0; tex_id < this.gl_textures.length; tex_id++)
|
|
{
|
|
gl.activeTexture(gl.TEXTURE0 + tex_id);
|
|
gl.bindTexture(gl.TEXTURE_2D, this.gl_textures[tex_id]);
|
|
|
|
var texture_sampler = gl.getUniformLocation(shader_program, 'texture' + tex_id);
|
|
gl.uniform1i(texture_sampler, tex_id);
|
|
}
|
|
|
|
gl.viewport(0, 0, this.canvas.width, this.canvas.height);
|
|
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
|
|
}
|
|
}
|
|
} // class TextureView
|
|
|
|
function display_texture(subresource_version_info)
|
|
{
|
|
if (g_view.resource_view !== null && get_subresource_unique_version_name(g_view.resource_view.subresource_version_info) == get_subresource_unique_version_name(subresource_version_info))
|
|
{
|
|
return;
|
|
}
|
|
|
|
var resource_desc = get_resource_desc(subresource_version_info['resource']);
|
|
g_view.set_resource_view(new TextureView(subresource_version_info, resource_desc));
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- DISPLAY BUFFER
|
|
|
|
const k_buffer_pixel_per_row = 20;
|
|
const k_buffer_max_display_row_count = 50;
|
|
const k_buffer_display_row_buffer = 50;
|
|
|
|
|
|
class GenericBufferView extends ResourceView
|
|
{
|
|
constructor(subresource_version_info, resource_desc)
|
|
{
|
|
super(subresource_version_info, resource_desc);
|
|
this.raw_buffer_data = null;
|
|
this.raw_buffer_data_path = null;
|
|
this.viewport_selected = false;
|
|
this.display_row_start = 0;
|
|
this.selected_address = -1;
|
|
this.structure_metadata = null;
|
|
this.display_elem_using_rows = resource_desc['NumElements'] == 1;
|
|
}
|
|
|
|
setup_html(parent_dom)
|
|
{
|
|
var html = '';
|
|
|
|
if (this.resource_desc['Desc'] != 'FRDGParameterStruct')
|
|
{
|
|
var resource_info_htmls = `
|
|
<table width="100%" class="resource_desc pretty_table">`;
|
|
|
|
for (var key in this.resource_desc)
|
|
{
|
|
if (this.resource_desc.hasOwnProperty(key))
|
|
{
|
|
var value = this.resource_desc[key];
|
|
|
|
if (key == 'Metadata')
|
|
{
|
|
if (this.resource_desc[key] == k_null_json_ptr)
|
|
{
|
|
value = 'nullptr';
|
|
}
|
|
else if (this.structure_metadata)
|
|
{
|
|
value = `${this.structure_metadata['StructTypeName']} (${get_filename(this.structure_metadata['FileName'])}:${this.structure_metadata['FileLine']})`;
|
|
}
|
|
}
|
|
|
|
resource_info_htmls += `
|
|
<tr>
|
|
<td>${key}</td>
|
|
<td>${value}</td>
|
|
</tr>`;
|
|
}
|
|
}
|
|
|
|
resource_info_htmls += `
|
|
</table>`;
|
|
|
|
html += `
|
|
<div class="main_div">
|
|
<div class="selection_list_title">Buffer descriptor: ${this.resource_desc['Name']}</div>
|
|
<div>
|
|
${resource_info_htmls}
|
|
</div>
|
|
</div>`;
|
|
}
|
|
|
|
html += `
|
|
<div class="main_div">
|
|
<div class="selection_list_title" style="width: auto;">Buffer visualization: ${this.resource_desc['Name']}</div>
|
|
<div id="buffer_outter">
|
|
<div id="buffer_viewport_header">
|
|
<table width="100%" id="buffer_visualization_format_outter">
|
|
<tr>
|
|
<td style="padding: 4px 20px 0 20px; text-align: right;" width="40px">Format:</td>
|
|
<td>
|
|
<input type="text" id="buffer_visualization_format" onchange="g_view.resource_view.refresh_buffer_visualization(true);" style="width: 100%;" />
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
<div id="buffer_visualization_member_search_outter">
|
|
<input type="search" id="buffer_visualization_member_search" oninput="g_view.resource_view.refresh_members();" onchange="g_view.resource_view.refresh_members();" style="width: 100%;" placeholder="Search member..." />
|
|
</div>
|
|
</div>
|
|
<div id="buffer_viewport">
|
|
<div id="buffer_content_pannel"></div>
|
|
</div>
|
|
</div>
|
|
</div>`;
|
|
|
|
parent_dom.innerHTML = html;
|
|
|
|
if (this.structure_metadata)
|
|
{
|
|
// document.getElementById('buffer_visualization_format').value = `${this.structure_metadata['StructTypeName']} (${get_filename(this.structure_metadata['FileName'])}:${this.structure_metadata['FileLine']})`;
|
|
// document.getElementById('buffer_visualization_format').readOnly = true;
|
|
document.getElementById('buffer_visualization_format_outter').style.display = 'none';
|
|
}
|
|
else
|
|
{
|
|
var default_format = '';
|
|
{
|
|
var byte_per_element = this.resource_desc['BytesPerElement'];
|
|
var member_count = byte_per_element / 4;
|
|
|
|
var default_format = 'hex(uint)';
|
|
|
|
// DrawIndirect flags means this is certainly a 32bit uint.
|
|
if ('Usage' in this.resource_desc && this.resource_desc['Usage'].includes('DrawIndirect'))
|
|
{
|
|
default_format = 'uint';
|
|
}
|
|
|
|
var format_per_column = [];
|
|
for (var i = 0; i < member_count; i++)
|
|
{
|
|
format_per_column.push(default_format);
|
|
}
|
|
|
|
default_format = format_per_column.join(', ');
|
|
}
|
|
|
|
document.getElementById('buffer_visualization_format').value = default_format;
|
|
document.getElementById('buffer_visualization_member_search_outter').style.display = 'none';
|
|
}
|
|
|
|
// Setup mouse callbacks
|
|
{
|
|
var buffer_view = this;
|
|
|
|
document.getElementById('buffer_outter').onclick = function(event) { buffer_view.onclick_buffer_outter(event); };
|
|
document.getElementById('buffer_outter').onmouseleave = function(event) { buffer_view.set_select_viewport(false); };
|
|
document.getElementById('buffer_viewport').onclick = function(event) { buffer_view.onclick_buffer_viewport(event); };
|
|
document.getElementById('buffer_viewport').onscroll = function(event) { buffer_view.update_buffer_scroll(/* force_refresh = */ false); };
|
|
}
|
|
|
|
var buffer_view = this;
|
|
console.assert(this.raw_buffer_data_path);
|
|
load_resource_binary_file(this.raw_buffer_data_path, function(raw_buffer_data)
|
|
{
|
|
if (raw_buffer_data)
|
|
{
|
|
buffer_view.raw_buffer_data = raw_buffer_data;
|
|
buffer_view.refresh_buffer_visualization(/* refresh header = */ true);
|
|
buffer_view.onload();
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('buffer_content_pannel').innerHTML = `
|
|
Error: ${this.raw_buffer_data_path} couldn't be loaded.`;
|
|
}
|
|
});
|
|
|
|
document.title = `${g_view.pass_data['EventName']} - ${this.resource_desc['Name']}`;
|
|
}
|
|
|
|
refresh_members()
|
|
{
|
|
this.refresh_buffer_visualization(/* refresh_header = */ !this.display_elem_using_rows);
|
|
}
|
|
|
|
onclick_buffer_outter(event)
|
|
{
|
|
this.set_select_viewport(true);
|
|
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
return;
|
|
}
|
|
|
|
var content_rect = document.getElementById('buffer_content_pannel').getBoundingClientRect();
|
|
var header_rect = document.getElementById('buffer_content_header').getBoundingClientRect();
|
|
|
|
var html_x = event.clientX - content_rect.left;
|
|
var html_y = event.clientY - content_rect.top - header_rect.height;
|
|
|
|
var new_selected_address = Math.floor(html_y / k_buffer_pixel_per_row);
|
|
|
|
if (new_selected_address != this.selected_address && new_selected_address < this.resource_desc['NumElements'])
|
|
{
|
|
this.selected_address = new_selected_address;
|
|
this.refresh_buffer_visualization();
|
|
}
|
|
}
|
|
|
|
onclick_buffer_viewport(event)
|
|
{
|
|
this.set_select_viewport(true);
|
|
}
|
|
|
|
set_select_viewport(selected)
|
|
{
|
|
if (this.viewport_selected === selected)
|
|
{
|
|
return;
|
|
}
|
|
|
|
this.viewport_selected = selected;
|
|
if (this.viewport_selected)
|
|
{
|
|
var buffer_view = this;
|
|
document.getElementById('buffer_outter').classList.add('selected');
|
|
document.getElementById('buffer_viewport').style.overflow = 'scroll';
|
|
//document.getElementById('buffer_viewport').style.margin = '0px 0px 0px 0px';
|
|
}
|
|
else
|
|
{
|
|
document.getElementById('buffer_outter').classList.remove('selected');
|
|
document.getElementById('buffer_viewport').style.overflow = 'hidden';
|
|
//document.getElementById('buffer_viewport').style.margin = `0px ${k_scroll_width}px ${k_scroll_width}px 0px`;
|
|
}
|
|
}
|
|
|
|
update_buffer_scroll(force_refresh)
|
|
{
|
|
var buffer_viewport = document.getElementById('buffer_viewport');
|
|
|
|
var new_display_row_start = Math.max(2 * Math.floor((buffer_viewport.scrollTop / k_buffer_pixel_per_row) * 0.5), 0);
|
|
|
|
if (new_display_row_start != this.display_row_start || force_refresh)
|
|
{
|
|
this.display_row_start = new_display_row_start;
|
|
this.refresh_buffer_visualization(/* refresh_header = */ false);
|
|
}
|
|
}
|
|
|
|
go_to_address()
|
|
{
|
|
var byte_per_element = this.resource_desc['BytesPerElement'];
|
|
|
|
var address = document.getElementById('buffer_address_input').value;
|
|
if (address == '')
|
|
{
|
|
if (this.selected_address != -1)
|
|
{
|
|
this.selected_address = -1;
|
|
this.update_buffer_scroll(/* force_refresh = */ true);
|
|
}
|
|
return;
|
|
}
|
|
|
|
var element_id = Math.floor(Number(address) / byte_per_element);
|
|
if (element_id < this.resource_desc['NumElements'])
|
|
{
|
|
this.selected_address = element_id;
|
|
|
|
var buffer_viewport = document.getElementById('buffer_viewport');
|
|
buffer_viewport.scrollTop = (element_id - 5) * k_buffer_pixel_per_row;
|
|
|
|
this.update_buffer_scroll(/* force_refresh = */ true);
|
|
}
|
|
}
|
|
|
|
refresh_buffer_visualization(refresh_header)
|
|
{
|
|
var byte_per_element = this.resource_desc['BytesPerElement'];
|
|
var num_element = this.resource_desc['NumElements'];
|
|
|
|
var member_count = 0;
|
|
var member_names = [];
|
|
var member_byte_offset = [];
|
|
var member_format = [];
|
|
if (this.structure_metadata)
|
|
{
|
|
var member_search = document.getElementById('buffer_visualization_member_search').value;
|
|
|
|
iterate_structure_members(this.structure_metadata, function(it) {
|
|
var column_format = undefined;
|
|
if (it.base_type == 'UBMT_INT32')
|
|
{
|
|
column_format = 'int';
|
|
}
|
|
else if (it.base_type == 'UBMT_UINT32')
|
|
{
|
|
column_format = 'uint';
|
|
}
|
|
else if (it.base_type == 'UBMT_FLOAT32')
|
|
{
|
|
column_format = 'float';
|
|
}
|
|
else
|
|
{
|
|
return;
|
|
}
|
|
|
|
if (member_search)
|
|
{
|
|
if (!it.cpp_name.toLowerCase().includes(member_search.toLowerCase()))
|
|
{
|
|
return;
|
|
}
|
|
}
|
|
|
|
const k_suffixes = ['.x', '.y', '.z', '.w'];
|
|
|
|
var relative_offset = 0;
|
|
for (var elem_id = 0; elem_id < Math.max(it.member['NumElements'], 1); elem_id++)
|
|
{
|
|
for (var row_id = 0; row_id < Math.max(it.member['NumRows'], 1); row_id++)
|
|
{
|
|
for (var column_id = 0; column_id < it.member['NumColumns']; column_id++)
|
|
{
|
|
var name = it.cpp_name;
|
|
|
|
if (it.member['NumElements'] > 0)
|
|
{
|
|
name += `[${elem_id}]`;
|
|
}
|
|
if (it.member['NumRows'] > 1)
|
|
{
|
|
name += k_suffixes[row_id];
|
|
}
|
|
if (it.member['NumColumns'] > 1)
|
|
{
|
|
name += k_suffixes[column_id];
|
|
}
|
|
|
|
member_count += 1;
|
|
member_byte_offset.push(it.byte_offset + relative_offset);
|
|
member_format.push(column_format);
|
|
member_names.push(name);
|
|
|
|
relative_offset += 4;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
else
|
|
{
|
|
member_count = byte_per_element / 4;
|
|
|
|
var text_format = document.getElementById('buffer_visualization_format').value;
|
|
|
|
var column_formats = text_format.split(',');
|
|
|
|
var byte_offset = 0;
|
|
|
|
column_formats.forEach(function(value, index) {
|
|
var format_to_use = value.trim();
|
|
|
|
member_byte_offset.push(byte_offset);
|
|
member_format.push(format_to_use);
|
|
member_names.push(format_to_use);
|
|
|
|
byte_offset += 4;
|
|
});
|
|
|
|
for (var i = member_format.length; i < member_count; i++)
|
|
{
|
|
var format_to_use = member_format[i % column_formats.length];
|
|
|
|
member_byte_offset.push(byte_offset);
|
|
member_format.push(format_to_use);
|
|
member_names.push(format_to_use);
|
|
|
|
byte_offset += 4;
|
|
}
|
|
|
|
}
|
|
|
|
var column_count = member_count;
|
|
var row_count = num_element;
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
if (this.structure_metadata)
|
|
{
|
|
column_count = 2;
|
|
}
|
|
else
|
|
{
|
|
column_count = 1;
|
|
}
|
|
row_count = member_count;
|
|
}
|
|
|
|
var display_start_row_id = Math.max(this.display_row_start - k_buffer_display_row_buffer, 0);
|
|
var display_row_count = Math.min(row_count - display_start_row_id, k_buffer_max_display_row_count + 2 * k_buffer_display_row_buffer);
|
|
var display_end_row_id = display_start_row_id + display_row_count;
|
|
|
|
var scroll_top = document.getElementById('buffer_viewport').scrollTop;
|
|
|
|
if (refresh_header)
|
|
{
|
|
var address_search_value = '';
|
|
if (document.getElementById('buffer_address_input'))
|
|
{
|
|
address_search_value = document.getElementById('buffer_address_input').value;
|
|
}
|
|
|
|
var classes = 'pretty_table';
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
classes += ' display_elem_using_rows';
|
|
}
|
|
|
|
var resource_content = `
|
|
<table id="buffer_content_table" class="${classes}" width="100%">
|
|
<tr class="header" id="buffer_content_header">`;
|
|
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
resource_content += `<td>Member</td><td>Value</td>`;
|
|
if (this.structure_metadata)
|
|
{
|
|
resource_content += `<td>Hex</td>`;
|
|
}
|
|
}
|
|
else
|
|
{
|
|
resource_content += `<td><input type="text" id="buffer_address_input" onchange="g_view.resource_view.go_to_address();" style="width: 100%;" placeholder="Address..." value="${address_search_value}" /></td>`;
|
|
for (var i = 0; i < member_count; i++)
|
|
{
|
|
resource_content += `<td>${member_names[i]}</td>`;
|
|
}
|
|
}
|
|
|
|
resource_content += `
|
|
<td></td>
|
|
</tr>
|
|
</table>`;
|
|
|
|
document.getElementById('buffer_content_pannel').innerHTML = resource_content;
|
|
}
|
|
else
|
|
{
|
|
var table_dom = document.getElementById("buffer_content_table");
|
|
while (table_dom.lastElementChild != table_dom.firstElementChild)
|
|
{
|
|
table_dom.removeChild(table_dom.lastElementChild);
|
|
}
|
|
}
|
|
|
|
{
|
|
// Start padding
|
|
var resource_content = ``;
|
|
{
|
|
resource_content += `
|
|
<tr>
|
|
<td style="height: ${k_buffer_pixel_per_row * display_start_row_id}px; padding: 0;"></td>
|
|
</tr>`;
|
|
}
|
|
|
|
for (var row_id = display_start_row_id; row_id < display_end_row_id; row_id++)
|
|
{
|
|
var elem_id = row_id;
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
elem_id = 0;
|
|
}
|
|
|
|
var classes = '';
|
|
if (elem_id == this.selected_address)
|
|
{
|
|
classes = 'highlighted';
|
|
}
|
|
|
|
resource_content += `
|
|
<tr class="${classes}">`;
|
|
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
resource_content += `
|
|
<td>${member_names[row_id]}</td>`;
|
|
}
|
|
else
|
|
{
|
|
resource_content += `
|
|
<td>0x${(elem_id * byte_per_element).toString(16)}</td>`;
|
|
}
|
|
|
|
for (var i = 0; i < column_count; i++)
|
|
{
|
|
var member_id = i;
|
|
if (this.display_elem_using_rows)
|
|
{
|
|
member_id = row_id;
|
|
}
|
|
|
|
var byte_offset = byte_per_element * elem_id + member_byte_offset[member_id];
|
|
|
|
var value = null;
|
|
var display = member_format[member_id];
|
|
|
|
if (this.display_elem_using_rows && i == 1 && this.structure_metadata)
|
|
{
|
|
display = `hex(${display})`;
|
|
}
|
|
|
|
if (display == 'float')
|
|
{
|
|
value = decode_float32((new Uint32Array(this.raw_buffer_data, byte_offset, 1))[0]);
|
|
}
|
|
else if (display == 'half')
|
|
{
|
|
value = decode_float16((new Uint16Array(this.raw_buffer_data, byte_offset, 1))[0]);
|
|
}
|
|
else if (display == 'int')
|
|
{
|
|
value = (new Int32Array(this.raw_buffer_data, byte_offset, 1))[0];
|
|
}
|
|
else if (display == 'uint')
|
|
{
|
|
value = (new Uint32Array(this.raw_buffer_data, byte_offset, 1))[0];
|
|
}
|
|
else if (display == 'short')
|
|
{
|
|
value = (new Int16Array(this.raw_buffer_data, byte_offset, 1))[0];
|
|
}
|
|
else if (display == 'ushort')
|
|
{
|
|
value = (new Uint16Array(this.raw_buffer_data, byte_offset, 1))[0];
|
|
}
|
|
else if (display == 'char')
|
|
{
|
|
value = (new Int8Array(this.raw_buffer_data, byte_offset, 1))[0];
|
|
}
|
|
else if (display == 'uchar')
|
|
{
|
|
value = (new Uint8Array(this.raw_buffer_data, byte_offset, 1))[0];
|
|
}
|
|
else if (display == 'hex(int)' || display == 'hex(uint)' || display == 'hex(float)')
|
|
{
|
|
value = '0x' + (new Uint32Array(this.raw_buffer_data, byte_offset, 1))[0].toString(16).padStart(8, 0);
|
|
}
|
|
else if (display == 'hex(short)' || display == 'hex(ushort)' || display == 'hex(half)')
|
|
{
|
|
value = '0x' + (new Uint16Array(this.raw_buffer_data, byte_offset, 1))[0].toString(16).padStart(4, 0);
|
|
}
|
|
else if (display == 'hex(char)' || display == 'hex(uchar)')
|
|
{
|
|
value = '0x' + (new Uint8Array(this.raw_buffer_data, byte_offset, 1))[0].toString(16).padStart(2, 0);
|
|
}
|
|
else if (display == 'bin(int)' || display == 'bin(uint)' || display == 'bin(float)')
|
|
{
|
|
value = '0b' + (new Uint32Array(this.raw_buffer_data, byte_offset, 1))[0].toString(2).padStart(32, 0);
|
|
}
|
|
else if (display == 'bin(short)' || display == 'bin(ushort)' || display == 'bin(half)')
|
|
{
|
|
value = '0b' + (new Uint16Array(this.raw_buffer_data, byte_offset, 1))[0].toString(2).padStart(16, 0);
|
|
}
|
|
else if (display == 'bin(char)' || display == 'bin(uchar)')
|
|
{
|
|
value = '0b' + (new Uint8Array(this.raw_buffer_data, byte_offset, 1))[0].toString(2).padStart(8, 0);
|
|
}
|
|
else
|
|
{
|
|
value = `Unknown ${display}`;
|
|
}
|
|
|
|
resource_content += `<td>${value}</td>`;
|
|
}
|
|
|
|
resource_content += `
|
|
<td></td>
|
|
</tr>`;
|
|
} // for (var row_id = display_start_row_id; row_id < display_end_row_id; row_id++)
|
|
|
|
if (row_count == 0)
|
|
{
|
|
resource_content += `
|
|
<tr>
|
|
<td colspan="${column_count + 2}" class="empty" align="center">Empty</td>
|
|
</tr>`;
|
|
}
|
|
|
|
// End padding
|
|
{
|
|
resource_content += `
|
|
<tr>
|
|
<td style="height: ${k_buffer_pixel_per_row * (row_count - display_end_row_id)}px; padding: 0;"></td>
|
|
</tr>`;
|
|
}
|
|
|
|
document.getElementById('buffer_content_table').innerHTML += resource_content;
|
|
}
|
|
|
|
document.getElementById('buffer_viewport').scrollTop = scroll_top;
|
|
|
|
{
|
|
var min_row_count = 10;
|
|
document.getElementById('buffer_viewport').style.height = `${k_scroll_width + Math.min(Math.max(row_count + 1, min_row_count), k_buffer_max_display_row_count) * k_buffer_pixel_per_row}px`;
|
|
}
|
|
}
|
|
|
|
release()
|
|
{
|
|
this.raw_buffer_data = null;
|
|
}
|
|
} // class GenericBufferView
|
|
|
|
|
|
class BufferView extends GenericBufferView
|
|
{
|
|
constructor(subresource_version_info, resource_desc)
|
|
{
|
|
super(subresource_version_info, resource_desc);
|
|
this.raw_buffer_data_path = `Resources/${get_subresource_unique_version_name(this.subresource_version_info)}.bin`;
|
|
|
|
if (resource_desc['Metadata'] != k_null_json_ptr)
|
|
{
|
|
this.structure_metadata = load_structure_metadata(resource_desc['Metadata']);
|
|
}
|
|
}
|
|
} // class BufferView
|
|
|
|
|
|
// -------------------------------------------------------------------- PARAMETER STRUCTURE
|
|
|
|
class ParameterStructureView extends GenericBufferView
|
|
{
|
|
constructor(subresource_version_info, resource_desc, structure_metadata)
|
|
{
|
|
super(subresource_version_info, resource_desc);
|
|
this.raw_buffer_data_path = `Structures/${subresource_version_info['resource']}.bin`;
|
|
this.structure_metadata = structure_metadata;
|
|
}
|
|
|
|
} // class ParameterStructureView
|
|
|
|
function display_pass_parameters(pass_id)
|
|
{
|
|
display_pass_internal(pass_id);
|
|
|
|
var pass_data = g_passes[pass_id];
|
|
var structure_metadata = load_structure_metadata(pass_data['ParametersMetadata']);
|
|
|
|
var subresource_version_info = {};
|
|
subresource_version_info['subresource'] = null;
|
|
subresource_version_info['resource'] = pass_data['Parameters'];
|
|
subresource_version_info['pass'] = pass_data['Pointer'];
|
|
subresource_version_info['draw'] = -1;
|
|
|
|
var resource_desc = {};
|
|
resource_desc['Name'] = 'PassParameters';
|
|
resource_desc['ByteSize'] = structure_metadata['Size'];
|
|
resource_desc['Desc'] = 'FRDGParameterStruct';
|
|
resource_desc['BytesPerElement'] = resource_desc['ByteSize'];
|
|
resource_desc['NumElements'] = 1;
|
|
resource_desc['Metadata'] = pass_data['ParametersMetadata'];
|
|
resource_desc['Usage'] = [];
|
|
|
|
g_view.set_resource_view(new ParameterStructureView(subresource_version_info, resource_desc, structure_metadata));
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- UI
|
|
|
|
function update_href_selection(parent)
|
|
{
|
|
var all_a = parent.getElementsByTagName("a");
|
|
|
|
var navs = [location.hash.substring(1)];
|
|
if (g_view)
|
|
{
|
|
navs = navs.concat(g_view.navigations);
|
|
}
|
|
|
|
for (let a of all_a)
|
|
{
|
|
var href = a.href.split('#');
|
|
|
|
if (navs.includes(`${href[1]}`))
|
|
{
|
|
a.classList.add('match_location_hash');
|
|
}
|
|
else if (a.classList.contains('match_location_hash'))
|
|
{
|
|
a.classList.remove('match_location_hash');
|
|
}
|
|
};
|
|
}
|
|
|
|
function update_value_selection(parent, selected_value)
|
|
{
|
|
var all_a = parent.getElementsByTagName("input");
|
|
|
|
for (let a of all_a)
|
|
{
|
|
if (a.value == selected_value)
|
|
{
|
|
a.classList.add('match_value');
|
|
}
|
|
else if (a.classList.contains('match_value'))
|
|
{
|
|
a.classList.remove('match_value');
|
|
}
|
|
};
|
|
}
|
|
|
|
function render_selection_list_html(parent_dom, display_list, options)
|
|
{
|
|
if ('deduplicate' in options)
|
|
{
|
|
var href_set = new Set();
|
|
var new_display_list = [];
|
|
for (const display_list_item of display_list)
|
|
{
|
|
if (display_list_item['href'])
|
|
{
|
|
if (!href_set.has(display_list_item['href']))
|
|
{
|
|
href_set.add(display_list_item['href']);
|
|
new_display_list.push(display_list_item);
|
|
}
|
|
}
|
|
else
|
|
{
|
|
new_display_list.push(display_list_item);
|
|
}
|
|
}
|
|
display_list = new_display_list;
|
|
}
|
|
|
|
if ('sort' in options)
|
|
{
|
|
display_list.sort(function(a, b)
|
|
{
|
|
if (a['name'] < b['name'])
|
|
{
|
|
return -1;
|
|
}
|
|
else if (a['name'] > b['name'])
|
|
{
|
|
return 1;
|
|
}
|
|
return 0;
|
|
});
|
|
}
|
|
|
|
var search = '';
|
|
if ('search' in options)
|
|
{
|
|
search = options['search'];
|
|
}
|
|
|
|
var html = '';
|
|
for (const display_list_item of display_list)
|
|
{
|
|
if (search && !display_list_item['name'].toLowerCase().includes(search.toLowerCase()))
|
|
{
|
|
continue;
|
|
}
|
|
|
|
if (display_list_item['href'])
|
|
{
|
|
html += `<a href="${display_list_item['href']}">${display_list_item['name']}</a>`;
|
|
}
|
|
else
|
|
{
|
|
html += `<a>${display_list_item['name']}</a>`;
|
|
}
|
|
}
|
|
|
|
if (html == '')
|
|
{
|
|
if (search)
|
|
{
|
|
html += `<div class="empty">No matches for "${search}"</div>`;
|
|
}
|
|
else
|
|
{
|
|
html += `<div class="empty">None</div>`;
|
|
}
|
|
}
|
|
|
|
parent_dom.innerHTML = html;
|
|
update_href_selection(parent_dom);
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- WINDOW LAYOUT
|
|
|
|
function init_top()
|
|
{
|
|
document.getElementById('top_bar').innerHTML = `${g_infos['Project']} - ${g_infos['Platform']} - ${g_infos['RHI']} - ${g_infos['BuildVersion']} - ${g_infos['DumpTime']} `;
|
|
}
|
|
|
|
function init_top_buttons()
|
|
{
|
|
document.getElementById('top_buttons').innerHTML = `
|
|
<a href="#display_infos();">Infos</a>
|
|
<a href="#display_cvars();">CVars</a>
|
|
<a href="#display_log();">Log</a>`;
|
|
document.getElementById('top_viewer_buttons').innerHTML = `
|
|
<a id="console_button" href="#display_console();">Console</a>`;
|
|
update_console_button();
|
|
}
|
|
|
|
function init_page()
|
|
{
|
|
// Load the dump service information to know how to read files. This is independent of Base/Infos.json because may depends whether it was uploaded through the DumpGPUServices plugin.
|
|
g_dump_service = load_json('Base/DumpService.json');
|
|
|
|
// Load the base information of the page.
|
|
g_infos = load_json('Base/Infos.json');
|
|
|
|
if (!g_dump_service || !g_infos)
|
|
{
|
|
document.body.innerHTML = 'Please use OpenGPUDumpViewer script for the viewer to work correctly.';
|
|
return;
|
|
}
|
|
|
|
// Verify the status of the dump, to check whether a crash happened during the dump.
|
|
{
|
|
var dump_status = load_text_file('Base/Status.txt');
|
|
if (dump_status == 'ok')
|
|
{
|
|
add_console_event('log', `The dump completed gracefully.`);
|
|
}
|
|
else if (dump_status == 'crash')
|
|
{
|
|
add_console_event('error', `A crash happened while the frame was being dumped.`);
|
|
}
|
|
else if (dump_status == 'dumping')
|
|
{
|
|
add_console_event('error', `The dump has not completed. This may be due to opening the viewer before completion, or serious problem that has not been handled with FCoreDelegates::OnShutdownAfterError`);
|
|
}
|
|
else
|
|
{
|
|
add_console_event('error', `The dump completed with status: ${dump_status}`);
|
|
}
|
|
}
|
|
|
|
// Load the cvars used for dumping.
|
|
{
|
|
g_dump_cvars = {};
|
|
|
|
var cvars_csv = load_text_file('Base/ConsoleVariables.csv');
|
|
var csv_lines = cvars_csv.split('\n');
|
|
for (var i = 1; i < csv_lines.length - 1; i++)
|
|
{
|
|
var csv_line = csv_lines[i].split(',');
|
|
var entry = {};
|
|
entry['name'] = csv_line[0];
|
|
if (entry['name'].startsWith('r.DumpGPU.'))
|
|
{
|
|
entry['type'] = csv_line[1];
|
|
entry['set_by'] = csv_line[2];
|
|
entry['value'] = csv_line[3];
|
|
g_dump_cvars[entry['name']] = entry['value'];
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// Load all the passes.
|
|
g_passes = load_json_dict_sequence('Base/Passes.json');
|
|
{
|
|
for (var pass_id = 0; pass_id < g_passes.length; pass_id++)
|
|
{
|
|
g_passes[pass_id]['DrawCount'] = 0;
|
|
if (!g_passes[pass_id]['EventName'])
|
|
{
|
|
g_passes[pass_id]['EventName'] = 'Unnamed pass';
|
|
}
|
|
}
|
|
|
|
var pass_draw_counts = load_json_dict_sequence('Base/PassDrawCounts.json');
|
|
if (pass_draw_counts)
|
|
{
|
|
pass_draw_counts.forEach(function(pass_draw_count_data) {
|
|
for (var pass_id = 0; pass_id < g_passes.length; pass_id++)
|
|
{
|
|
if (g_passes[pass_id]['Pointer'] == pass_draw_count_data['Pointer'])
|
|
{
|
|
g_passes[pass_id]['DrawCount'] = pass_draw_count_data['DrawCount'];
|
|
break;
|
|
}
|
|
}
|
|
});
|
|
}
|
|
}
|
|
|
|
// Load all the resource descriptors
|
|
{
|
|
g_descs = {};
|
|
|
|
var desc_list = load_json_dict_sequence('Base/ResourceDescs.json');
|
|
for (const desc of desc_list)
|
|
{
|
|
g_descs[desc['UniqueResourceName']] = desc;
|
|
}
|
|
}
|
|
|
|
if (!does_file_exists(get_log_path()))
|
|
{
|
|
add_console_event('error', `The dump does not contain ${get_log_path()}. The log is normally copied into the dump directory once the dump is completed. Failing to have is may be due to a premature end of the dumping process.`);
|
|
}
|
|
else
|
|
{
|
|
add_console_event('log', `Viewer init ok`);
|
|
}
|
|
|
|
init_top();
|
|
init_top_buttons();
|
|
display_pass_hierarchy();
|
|
|
|
// Find the last passes that have a displayable texture 2D.
|
|
if (location.hash)
|
|
{
|
|
return navigate_to_hash();
|
|
}
|
|
|
|
// Find the last pass that modify the RDG resource set by 'r.DumpGPU.Viewer.Visualize'
|
|
if ('r.DumpGPU.Viewer.Visualize' in g_dump_cvars && g_dump_cvars['r.DumpGPU.Viewer.Visualize'] != '')
|
|
{
|
|
var pass_id_to_open = -1;
|
|
var subresource_unique_name_to_open = null;
|
|
|
|
document.getElementById('resource_search_input').value = g_dump_cvars['r.DumpGPU.Viewer.Visualize'];
|
|
display_pass_hierarchy();
|
|
|
|
for (var pass_id = 0; pass_id < g_passes.length && pass_id_to_open == -1; pass_id++)
|
|
{
|
|
var pass_data = g_passes[g_passes.length - 1 - pass_id];
|
|
|
|
for (var subresource_unique_name of pass_data['OutputResources'])
|
|
{
|
|
var subresource_info = parse_subresource_unique_name(subresource_unique_name);
|
|
var resource_desc = get_resource_desc(subresource_info['resource']);
|
|
|
|
if (resource_desc === null)
|
|
{
|
|
continue;
|
|
}
|
|
|
|
if (resource_desc['Name'] == g_dump_cvars['r.DumpGPU.Viewer.Visualize'] && pass_id_to_open == -1)
|
|
{
|
|
pass_id_to_open = g_passes.length - 1 - pass_id;
|
|
subresource_unique_name_to_open = subresource_unique_name;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
|
|
if (pass_id_to_open != -1)
|
|
{
|
|
return redirect_to_hash(`display_output_resource(${pass_id_to_open},'${subresource_unique_name_to_open}');`);
|
|
}
|
|
}
|
|
|
|
return display_tip();
|
|
}
|
|
|
|
function onresize_body()
|
|
{
|
|
var w = window.innerWidth;
|
|
var h = window.innerHeight;
|
|
|
|
var top_h = 40;
|
|
|
|
document.getElementById('onresize_body_top_bar').style.width = `${w}px`;
|
|
document.getElementById('onresize_body_top_bar').style.height = `${top_h}px`;
|
|
|
|
document.getElementById('onresize_body_left').style.width = `${Math.floor(w * 0.25)}px`;
|
|
document.getElementById('onresize_body_left').style.height = `${h - top_h}px`;
|
|
|
|
document.getElementById('onresize_body_right').style.width = `${w - Math.floor(w * 0.25)}px`;
|
|
document.getElementById('onresize_body_right').style.height = `${h - top_h}px`;
|
|
|
|
document.getElementById('onresize_body_right').style.width = `${w - Math.floor(w * 0.25)}px`;
|
|
document.getElementById('onresize_body_right').style.height = `${h - top_h}px`;
|
|
|
|
{
|
|
var search_h = (30 + 2 * 5) * 2;
|
|
document.getElementById('pass_hierarchy').style.width = `${Math.floor(w * 0.25) - 10 * 2}px`;
|
|
document.getElementById('pass_hierarchy').style.height = `${h - top_h - search_h - 10 * 2}px`;
|
|
}
|
|
|
|
{
|
|
//document.getElementById('main_right_pannel').style.width = document.getElementById('onresize_body_right').style.width;
|
|
document.getElementById('main_right_pannel').style.height = `${h - top_h - 10 * 2}px`;
|
|
}
|
|
|
|
if (g_view !== null)
|
|
{
|
|
var ctx = {};
|
|
ctx.width = w - Math.floor(w * 0.25);
|
|
g_view.resize(ctx);
|
|
}
|
|
}
|
|
|
|
|
|
// -------------------------------------------------------------------- NAVIGATION
|
|
|
|
var g_previous_location_hash = null;
|
|
|
|
function redirect_to_hash(new_hash)
|
|
{
|
|
if (new_hash === g_previous_location_hash)
|
|
{
|
|
return;
|
|
}
|
|
|
|
location.hash = new_hash;
|
|
}
|
|
|
|
function navigate_to_hash()
|
|
{
|
|
if (location.hash === g_previous_location_hash)
|
|
{
|
|
return;
|
|
}
|
|
|
|
g_previous_location_hash = location.hash;
|
|
|
|
if (location.hash)
|
|
{
|
|
var js = location.hash.substring(1);
|
|
eval(js);
|
|
}
|
|
else
|
|
{
|
|
display_tip();
|
|
}
|
|
|
|
update_href_selection(document);
|
|
}
|
|
|
|
function get_current_navigation()
|
|
{
|
|
return g_previous_location_hash;
|
|
}
|
|
|
|
</script>
|
|
|
|
|
|
<style type="text/css">
|
|
|
|
|
|
/* ----------------------------------------------------- them colors */
|
|
|
|
:root
|
|
{
|
|
--border-radius: 2px;
|
|
|
|
--body-bg-color: rgb(21, 21, 21);
|
|
--body-txt-size: 12px;
|
|
|
|
--div-bg-color: rgb(36, 36, 36);
|
|
--div-txt-color: rgb(192, 192, 192);
|
|
--a-bg-color-odd: rgb(26, 26, 26);
|
|
--a-bg-color-hover: #332222;
|
|
--a-bg-color-hoverhref: rgb(38, 67, 81);
|
|
--a-txt-color-disabled: rgb(113, 113, 113);
|
|
|
|
--a-bg-color-selected: rgb(38, 187, 255);
|
|
--a-txt-color-selected: rgb(15, 15, 15);
|
|
|
|
--channel-red-color: rgb(255, 38, 38);
|
|
--channel-green-color: rgb(38, 255, 38);
|
|
--channel-blue-color: rgb(38, 187, 255);
|
|
--channel-alpha-color: white;
|
|
|
|
--error-txt-color: var(--channel-red-color);
|
|
|
|
--header-bg-color: rgb(47, 47, 47);
|
|
|
|
--button-border-radius: var(--border-radius);
|
|
--button-bg-color: rgb(56, 56, 56);
|
|
--button-bg-color-hover: rgb(87, 87, 87);
|
|
--button-bg-color-selected: rgb(15, 15, 15);
|
|
--button-txt-color: var(--div-txt-color);
|
|
--button-txt-color-hover: rgb(255, 255, 255);
|
|
--button-txt-color-selected: rgb(38, 187, 255);
|
|
|
|
|
|
--scroll-bg-color: var(--a-bg-color-odd);
|
|
--scroll-color: rgb(87, 87, 87);
|
|
--scroll-color-hover: rgb(128, 128, 128);
|
|
|
|
--input-bg-color: rgb(15, 15, 15);
|
|
--input-border: 1px solid rgb(55, 55, 55);
|
|
--input-border-hover: rgb(83, 83, 83);
|
|
--input-border-focus: rgb(38, 176, 239);
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- override default */
|
|
|
|
body
|
|
{
|
|
overflow: hidden;
|
|
background: var(--body-bg-color);
|
|
color: var(--div-txt-color);
|
|
margin: 0;
|
|
padding: 0;
|
|
/*font-family: Arial, Helvetica, sans-serif;*/
|
|
font-family: consolas, "Liberation Mono", courier, monospace;
|
|
font-size: var(--body-txt-size);
|
|
/* overflow: hidden; */
|
|
}
|
|
|
|
table, tr, td, div, a
|
|
{
|
|
margin: 0;
|
|
padding: 0;
|
|
border-spacing: 0;
|
|
border-collapse: collapse;
|
|
vertical-align: top;
|
|
cursor: default;
|
|
font-size: inherit;
|
|
}
|
|
|
|
td
|
|
{
|
|
cursor: default;
|
|
}
|
|
|
|
div, a
|
|
{
|
|
display: block;
|
|
cursor: default;
|
|
}
|
|
|
|
a, a:hover, a:visited
|
|
{
|
|
color: inherit;
|
|
font: inherit;
|
|
text-decoration: none;
|
|
cursor: default;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- external link */
|
|
|
|
a.external_link
|
|
{
|
|
color: inherit;
|
|
cursor: pointer;
|
|
}
|
|
|
|
a.external_link:hover
|
|
{
|
|
color: var(--button-txt-color-hover);
|
|
}
|
|
|
|
a.external_link:active
|
|
{
|
|
color: var(--button-txt-color-selected);
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- inputs scroll bars */
|
|
|
|
input
|
|
{
|
|
padding: 3px 5px;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
input[type=search]
|
|
{
|
|
padding: 3px 13px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
textarea
|
|
{
|
|
padding: 3px 3px;
|
|
}
|
|
|
|
input, textarea
|
|
{
|
|
background-color: var(--input-bg-color);
|
|
color: var(--div-txt-color);
|
|
border: var(--input-border);
|
|
outline: none;
|
|
font-size: inherit;
|
|
font: inherit;
|
|
}
|
|
|
|
input[readonly], textarea[readonly]
|
|
{
|
|
color: var(--a-txt-color-disabled);
|
|
}
|
|
|
|
input:not([readonly]):hover,
|
|
textarea:not([readonly]):hover
|
|
{
|
|
border-color: var(--input-border-hover);
|
|
}
|
|
|
|
input[type=text]:not([readonly]):focus,
|
|
input[type=search]:not([readonly]):focus,
|
|
textarea:not([readonly]):focus
|
|
{
|
|
color: rgb(254, 254, 254);
|
|
border-color: var(--input-border-focus);
|
|
}
|
|
|
|
input:focus, textarea:focus
|
|
{
|
|
outline: none;
|
|
}
|
|
|
|
input::placeholder
|
|
{
|
|
color: rgb(76, 76, 76);
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- webkit scroll bars */
|
|
|
|
*::-webkit-scrollbar {
|
|
width: 8px;
|
|
height: 8px;
|
|
background: var(--scroll-bg-color);
|
|
}
|
|
|
|
*::-webkit-scrollbar-corner, *::-webkit-scrollbar-track {
|
|
background: var(--scroll-bg-color);
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb {
|
|
background-color: var(--scroll-color);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
*::-webkit-scrollbar-thumb:hover {
|
|
background-color: var(--scroll-color-hover);
|
|
border-radius: 20px;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- common layout */
|
|
|
|
.main_div
|
|
{
|
|
background: var(--div-bg-color);
|
|
padding: 5px;
|
|
margin: 5px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
#main_right_pannel .main_div
|
|
{
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- Selection list */
|
|
|
|
.selection_list_title
|
|
{
|
|
font-size: 20;
|
|
font-weight: bold;
|
|
padding: 5px 20px 10px 20px;
|
|
}
|
|
|
|
.selection_list_search
|
|
{
|
|
padding: 0px 5px;
|
|
height: 30px;
|
|
width: auto;
|
|
}
|
|
|
|
.selection_list_search input[type=search]
|
|
{
|
|
width: 100%;
|
|
}
|
|
|
|
.selection_list
|
|
{
|
|
max-height: inherit;
|
|
overflow-x: auto;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
.selection_list a
|
|
{
|
|
width: auto;
|
|
padding: 5px 20px;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.selection_list a:nth-child(odd)
|
|
{
|
|
background: var(--a-bg-color-odd);
|
|
}
|
|
|
|
.selection_list a:not(.match_location_hash):hover
|
|
{
|
|
background: var(--a-bg-color-hover);
|
|
}
|
|
|
|
.selection_list a:not(.match_location_hash)[href]:hover
|
|
{
|
|
background: var(--a-bg-color-hoverhref);
|
|
color: var(--button-txt-color-hover);
|
|
cursor: pointer;
|
|
}
|
|
|
|
/*.selection_list a.match_location_hash
|
|
{
|
|
background: var(--a-bg-color-selected);
|
|
color: var(--a-txt-color-selected);
|
|
}*/
|
|
|
|
.selection_list a.match_location_hash
|
|
{
|
|
background: var(--button-bg-color-selected);
|
|
color: var(--button-txt-color-selected);
|
|
}
|
|
|
|
.selection_list a.disabled
|
|
{
|
|
color: var(--a-txt-color-disabled);
|
|
}
|
|
|
|
.selection_list div.empty
|
|
{
|
|
width: 100%;
|
|
margin: 20px 0 0 0;
|
|
color: var(--a-txt-color-disabled);
|
|
text-align: center;
|
|
}
|
|
|
|
#main_right_pannel .selection_list
|
|
{
|
|
min-height: 100px;
|
|
max-height: 200px;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- table */
|
|
|
|
.pretty_table tr.header
|
|
{
|
|
background: var(--header-bg-color);
|
|
font-weight: bold;
|
|
}
|
|
|
|
.pretty_table tr:not(.header):nth-child(odd) td
|
|
{
|
|
background: var(--a-bg-color-odd);
|
|
}
|
|
|
|
.pretty_table tr:not(.header):hover td:not(.empty)
|
|
{
|
|
background: var(--a-bg-color-hover);
|
|
}
|
|
|
|
.pretty_table tr td
|
|
{
|
|
display: table-cell;
|
|
padding: 5px 20px;
|
|
}
|
|
|
|
.pretty_table tr td:first-child
|
|
{
|
|
width: 150px;
|
|
}
|
|
|
|
.pretty_table tr.header td
|
|
{
|
|
padding: 5px 30px;
|
|
}
|
|
|
|
.pretty_table tr.header td:not(:first-child)
|
|
{
|
|
border-left: 1px solid rgb(36, 36, 36);
|
|
}
|
|
|
|
.pretty_table .empty
|
|
{
|
|
padding: 20px 0 0 0;
|
|
color: var(--a-txt-color-disabled);
|
|
text-align: center;
|
|
}
|
|
|
|
.pretty_table tr.error td
|
|
{
|
|
color: var(--error-txt-color);
|
|
}
|
|
|
|
.resource_desc tr td:not(.empty)
|
|
{
|
|
width: 150px;
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- button */
|
|
|
|
.button_list a,
|
|
.button_list input
|
|
{
|
|
margin: 0;
|
|
display: inline-block;
|
|
display: table-cell;
|
|
padding: 3px 10px;
|
|
background-color: var(--button-bg-color);
|
|
color: var(--button-txt-color);
|
|
cursor: pointer;
|
|
border-radius: 0;
|
|
}
|
|
|
|
.button_list a:first-child,
|
|
.button_list input:first-child
|
|
{
|
|
border-top-left-radius: var(--button-border-radius);
|
|
border-bottom-left-radius: var(--button-border-radius);
|
|
}
|
|
|
|
.button_list a:last-child,
|
|
.button_list input:last-child
|
|
{
|
|
border-top-right-radius: var(--button-border-radius);
|
|
border-bottom-right-radius: var(--button-border-radius);
|
|
}
|
|
|
|
.button_list a:not(.match_location_hash):not(:active):hover,
|
|
.button_list input:not(.match_value):not(:active):hover
|
|
{
|
|
background-color: var(--button-bg-color-hover);
|
|
}
|
|
|
|
.button_list a:not(.match_location_hash):not(.error):not(:active):hover,
|
|
.button_list input:not(.match_value):not(:active):hover
|
|
{
|
|
color: var(--button-txt-color-hover);
|
|
}
|
|
|
|
.button_list a:active,
|
|
.button_list a.match_location_hash,
|
|
.button_list input:active,
|
|
.button_list input.match_value
|
|
{
|
|
background-color: var(--button-bg-color-selected);
|
|
color: var(--button-txt-color-selected);
|
|
}
|
|
|
|
.button_list a.error,
|
|
.button_list a.error:active
|
|
{
|
|
color: var(--error-txt-color);
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- top bar */
|
|
|
|
#top_bar
|
|
{
|
|
font-size: 20;
|
|
font-weight: bold;
|
|
padding: 10px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#top_buttons,
|
|
#top_viewer_buttons
|
|
{
|
|
padding: 12px;
|
|
display: inline-block;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- main_right_pannel */
|
|
|
|
#main_right_pannel
|
|
{
|
|
width: auto;
|
|
overflow-x: auto;
|
|
overflow-y: scroll;
|
|
}
|
|
|
|
#main_right_pannel .pass_title
|
|
{
|
|
font-size: 20;
|
|
font-weight: bolder;
|
|
padding: 10px 40px;
|
|
}
|
|
|
|
#main_right_pannel .pass_title .button_list
|
|
{
|
|
font-size: var(--body-txt-size);
|
|
margin-top: 3px;
|
|
}
|
|
|
|
#cvars_pannel
|
|
{
|
|
height: auto;
|
|
max-height: none;
|
|
}
|
|
|
|
#cvars_pannel .pretty_table tr td:nth-child(2)
|
|
{
|
|
text-align: right;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- TextureView */
|
|
|
|
#canvas_outter
|
|
{
|
|
background-color: var(--input-bg-color);
|
|
color: var(--div-txt-color);
|
|
border: var(--input-border);
|
|
}
|
|
|
|
#canvas_outter:not(.selected):hover
|
|
{
|
|
border-color: var(--input-border-hover);
|
|
}
|
|
|
|
#canvas_outter.selected
|
|
{
|
|
border-color: var(--input-border-focus);
|
|
}
|
|
|
|
#canvas_outter #canvas_header
|
|
{
|
|
padding: 3px;
|
|
border-bottom: var(--input-border);
|
|
}
|
|
|
|
#canvas_outter #canvas_header .button_list
|
|
{
|
|
display: inline-block;
|
|
}
|
|
|
|
#canvas_outter #canvas_footer
|
|
{
|
|
padding: 3px 10px;
|
|
border-top: var(--input-border);
|
|
}
|
|
|
|
#canvas_outter #canvas_viewport
|
|
{
|
|
overflow: hidden;
|
|
background-image:
|
|
linear-gradient(45deg, #000 25%, transparent 25%),
|
|
linear-gradient(45deg, transparent 75%, #000 75%),
|
|
linear-gradient(45deg, transparent 75%, #000 75%),
|
|
linear-gradient(45deg, #000 25%, var(--input-bg-color) 25%);
|
|
background-size:16px 16px;
|
|
background-position:0 0, 0 0, -8px -8px, 8px 8px;
|
|
}
|
|
|
|
#canvas_outter .error_msg
|
|
{
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
color: var(--error-txt-color);
|
|
}
|
|
|
|
#canvas_outter canvas
|
|
{
|
|
cursor: crosshair;
|
|
image-rendering: optimizeSpeed;
|
|
image-rendering: -moz-crisp-edges;
|
|
image-rendering: -webkit-optimize-contrast;
|
|
image-rendering: -o-crisp-edges;
|
|
image-rendering: pixelated;
|
|
-ms-interpolation-mode: nearest-neighbor;
|
|
}
|
|
|
|
#texture_visualization_code_input
|
|
{
|
|
min-width: 800px;
|
|
min-height: 200px;
|
|
display: block;
|
|
width: auto;
|
|
}
|
|
|
|
#texture_visualization_code_log
|
|
{
|
|
margin-top: 10px;
|
|
min-width: 800px;
|
|
min-height: 200px;
|
|
display: block;
|
|
width: auto;
|
|
}
|
|
|
|
|
|
/* ----------------------------------------------------- BufferView */
|
|
|
|
#buffer_outter
|
|
{
|
|
background-color: var(--input-bg-color);
|
|
color: var(--div-txt-color);
|
|
border: var(--input-border);
|
|
}
|
|
|
|
#buffer_outter:not(.selected):hover
|
|
{
|
|
border-color: var(--input-border-hover);
|
|
}
|
|
|
|
#buffer_outter.selected
|
|
{
|
|
border-color: var(--input-border-focus);
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport_header
|
|
{
|
|
padding: 3px;
|
|
border-bottom: var(--input-border);
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport
|
|
{
|
|
overflow: hidden;
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table tr.header
|
|
{
|
|
position: sticky;
|
|
top: 0;
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table:not(.display_elem_using_rows) tr.header td:first-child
|
|
{
|
|
padding: 0 3px;
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table tr td:not(.empty)
|
|
{
|
|
padding: 3px 5px 0px 5px;
|
|
width: 60px;
|
|
height: 20px;
|
|
overflow: hidden;
|
|
text-align: right;
|
|
/*font-family: consolas, "Liberation Mono", courier, monospace;*/
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table.display_elem_using_rows tr td:not(.empty):first-child
|
|
{
|
|
text-align: left;
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table tr td:first-child
|
|
{
|
|
width: 100px;
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table tr td:last-child
|
|
{
|
|
width: auto;
|
|
}
|
|
|
|
#buffer_outter #buffer_viewport #buffer_content_table tr.highlighted
|
|
{
|
|
color: var(--button-txt-color-selected);
|
|
}
|
|
|
|
</style>
|
|
|
|
|
|
<body onload="init_console(); onresize_body(); init_page();" onresize="onresize_body();" onhashchange="navigate_to_hash();">
|
|
<table cellpadding="0" cellspacing="0" border="0" id="onresize_body_table">
|
|
<tr>
|
|
<td colspan="2" id="onresize_body_top_bar">
|
|
<div id="top_bar"></div>
|
|
<div id="top_buttons" class="button_list"></div>
|
|
<div id="top_viewer_buttons" class="button_list"></div>
|
|
</td>
|
|
</tr>
|
|
<tr>
|
|
<td valign="top" id="onresize_body_left">
|
|
<div class="main_div">
|
|
<div id="pass_hierarchy_search" style="padding: 5px; height: 70px;">
|
|
<input type="search" id="pass_search_input" oninput="display_pass_hierarchy();" onchange="display_pass_hierarchy();" style="width: 100%;" placeholder="Search pass..." />
|
|
<input type="search" id="resource_search_input" oninput="display_pass_hierarchy();" onchange="display_pass_hierarchy();" style="width: 100%; margin-top: 10px;" placeholder="Search resource..." />
|
|
</div>
|
|
<div id="pass_hierarchy" class="selection_list"></div>
|
|
</div>
|
|
</td>
|
|
<td valign="top" id="onresize_body_right">
|
|
<div id="main_right_pannel"></div>
|
|
</td>
|
|
</tr>
|
|
</table>
|
|
</body>
|
|
</html>
|