Dies ist das Repository meines kleinen Portfolios.
Im Hintergrund läuft eine Planetensimulation, geschrieben in JavaScript und Three.js.
Die zu sehenden Texturen stammen von:
https://www.solarsystemscope.com/textures/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
134 lines
2.4 KiB
134 lines
2.4 KiB
( function () { |
|
|
|
// https://www.khronos.org/registry/webgl/extensions/EXT_disjoint_timer_query_webgl2/ |
|
|
|
class GPUStatsPanel extends Stats.Panel { |
|
|
|
constructor( context, name = 'GPU MS' ) { |
|
|
|
super( name, '#f90', '#210' ); |
|
let isWebGL2 = true; |
|
let extension = context.getExtension( 'EXT_disjoint_timer_query_webgl2' ); |
|
|
|
if ( extension === null ) { |
|
|
|
isWebGL2 = false; |
|
extension = context.getExtension( 'EXT_disjoint_timer_query' ); |
|
|
|
if ( extension === null ) { |
|
|
|
console.warn( 'GPUStatsPanel: disjoint_time_query extension not available.' ); |
|
|
|
} |
|
|
|
} |
|
|
|
this.context = context; |
|
this.extension = extension; |
|
this.maxTime = 30; |
|
this.activeQueries = 0; |
|
|
|
this.startQuery = function () { |
|
|
|
const gl = this.context; |
|
const ext = this.extension; |
|
|
|
if ( ext === null ) { |
|
|
|
return; |
|
|
|
} // create the query object |
|
|
|
|
|
let query; |
|
|
|
if ( isWebGL2 ) { |
|
|
|
query = gl.createQuery(); |
|
gl.beginQuery( ext.TIME_ELAPSED_EXT, query ); |
|
|
|
} else { |
|
|
|
query = ext.createQueryEXT(); |
|
ext.beginQueryEXT( ext.TIME_ELAPSED_EXT, query ); |
|
|
|
} |
|
|
|
this.activeQueries ++; |
|
|
|
const checkQuery = () => { |
|
|
|
// check if the query is available and valid |
|
let available, disjoint, ns; |
|
|
|
if ( isWebGL2 ) { |
|
|
|
available = gl.getQueryParameter( query, gl.QUERY_RESULT_AVAILABLE ); |
|
disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT ); |
|
ns = gl.getQueryParameter( query, gl.QUERY_RESULT ); |
|
|
|
} else { |
|
|
|
available = ext.getQueryObjectEXT( query, ext.QUERY_RESULT_AVAILABLE_EXT ); |
|
disjoint = gl.getParameter( ext.GPU_DISJOINT_EXT ); |
|
ns = ext.getQueryObjectEXT( query, ext.QUERY_RESULT_EXT ); |
|
|
|
} |
|
|
|
const ms = ns * 1e-6; |
|
|
|
if ( available ) { |
|
|
|
// update the display if it is valid |
|
if ( ! disjoint ) { |
|
|
|
this.update( ms, this.maxTime ); |
|
|
|
} |
|
|
|
this.activeQueries --; |
|
|
|
} else { |
|
|
|
// otherwise try again the next frame |
|
requestAnimationFrame( checkQuery ); |
|
|
|
} |
|
|
|
}; |
|
|
|
requestAnimationFrame( checkQuery ); |
|
|
|
}; |
|
|
|
this.endQuery = function () { |
|
|
|
// finish the query measurement |
|
const ext = this.extension; |
|
const gl = this.context; |
|
|
|
if ( ext === null ) { |
|
|
|
return; |
|
|
|
} |
|
|
|
if ( isWebGL2 ) { |
|
|
|
gl.endQuery( ext.TIME_ELAPSED_EXT ); |
|
|
|
} else { |
|
|
|
ext.endQueryEXT( ext.TIME_ELAPSED_EXT ); |
|
|
|
} |
|
|
|
}; |
|
|
|
} |
|
|
|
} |
|
|
|
THREE.GPUStatsPanel = GPUStatsPanel; |
|
|
|
} )();
|
|
|