webgl & webgpu

[Thorin-Oakenpants]

@abrahamjuliot - is this uptodate? https://gist.github.com/abrahamjuliot/7baf3be8c451d23f7a8693d7e28a35e2

I don't want to re-invent the wheel, so want to use your code (accredited) if that's OK - please advise

ATM, I only want to collect the parameters, extensions, vendor, etc - not any actual rendering

---

so some questions

Q1

https://gist.github.com/abrahamjuliot/7baf3be8c451d23f7a8693d7e28a35e2#file-webgl-js-L91-L94

        let canvas = {}
        let context = {}
        try {
            canvas = document.createElement('canvas')
            context = canvas.getContext(type) || canvas.getContext('experimental-' + type)

so here, I wanted to use an already created canvas (I think it saves time)

        let canvas = {}
	let context = {}
	try {
		canvas = dom.webglcanvas
		context = canvas.getContext(type) || canvas.getContext('experimental-' + type)

but I get errors for webgl2 (webgl is fine)

I also don't see where you remove and cleanup the document.createElement('canvas') - remember, TZP allows section reruns so I don't want to end up with dozens of canvas elements

---

Q2

what is newmethods meant to signify in webgl2 ?

---

Q3

for data collection/entropy - I am not webgl savvy - but remember in the old TZP repo we discussed, and I mocked up, a webgl section that would return webgl, webgl2, experimental results - a bit like

• https://webglreport.com/ - webgl 1 + webgl2
• https://browserleaks.com/webgl - it has three toggles

how is this all reflected in the objects in the console? I'm a bit lost

---

Q4

how/what are you doing with this data to only show one set of parameters on creepy - I can see that some are identical in webgl 1 vs 2 - and there is a diffs output. Are you merging these?

---

Q5?

I guess I'll have to play to catch errors and return that - you seem to just console them and return undefined (I guess I could do that)

[Thorin-Oakenpants]

Q1 - answered: I just needed two canvas elements

		<div>
			<canvas id="webglcanvas"></canvas>
			<canvas id="webgl2canvas"></canvas>
		</div>

is there some benefit to creating the canvas on the fly?

[abrahamjuliot]

The gist is good. Always welcome... All credit for that one goes to https://github.com/CesiumGS/webglreport. My refactoring is minimal.

There are a few techniques not in there, but worth checking out. These are mostly experimental ideas that can be used to determine trustworthy vs. suspicious GPUs.

// Highlight common GPU brands
// gpu can be a string of the renderer or both the vendor and renderer
function getGpuBrand(gpu) {
  if (!gpu) return
  const gpuBrandMatcher = /(adreno|amd|apple|intel|llvm|mali|microsoft|nvidia|parallels|powervr|samsung|swiftshader|virtualbox|vmware)/i

  const brand = (
    /radeon/i.test(gpu) ? 'AMD' :
    /geforce/i.test(gpu) ? 'NVIDIA' :
    ( (gpuBrandMatcher.exec(gpu) || [])[0] || 'Other' )
  )

  return brand
}

// Takes the parameter object and generate a fingerprint of sorted numeric values
// This can be used to create a known good hash table and known brands can be labelled for each hash.
function generateParamFingerprint(parameters) {
  if (!parameters) return
  return '' + [
    ...new Set(Object.values(parameters)
      .filter((val) => val && typeof val != 'string')
      .flat()
      .map((val) => Number(val))),
  ].sort((a, b) => (a - b))
}

[abrahamjuliot]

Q1

A premade canvas in the HTML can sometimes bypass scripts observing createElement('canvas'). Optionally, one context is good. webgl2 has more parameters. Since we are not appending the element to the page, a new document.createElement('canvas') on repeat re-runs should be fine.

[abrahamjuliot]

Q2

newMethods is just functions in WebGLRenderingContext.prototype. It's not that great for fingerprinting (compared to CSS and the Window). It just current browser features in the prototype.

[abrahamjuliot]

Q3

I forgot to add the sections like "Vertex Shader" and "Rasterizer", but these can be determined based on the property names. We just need to create a map.

parameterType = {
  'Vertex Shader': [
     'MAX_VERTEX_ATTRIBS',
     'MAX_VERTEX_TEXTURE_IMAGE_UNITS',
     'MAX_VERTEX_UNIFORM_VECTORS',
  ]
}

if (ParameterType['Vertex Shader'].includes(propertyName)) {
  // add to Vertex Shader section
}

[abrahamjuliot]

Q4

I merge as a final simplification, but also check and flag mismatch behind the scenes. I recall an incident where a mismatch was valid, so I just treat it as questionable.

[abrahamjuliot]

Q5

We can trap the error and push to a global collection. There are a few places different errors might get thrown due to users disabling or blocking the API, or parts of the API.

[Thorin-Oakenpants]

I merge as a final simplification

hmmm, so I'm not sure how I want to present all this info - where is all the experimental stuff? I mean we can see webgl and webgl2. e.g. here's just checking for support. https://browserleaks.com/webgl has THREE toggles. Is this info in there (sorry for being a lazy bum but not into learning about webgl right now, lol) or it something we need to add

e.g.

let types = ["webgl", "webgl2", "experimental-webgl"]
types.forEach(function(type){
	try {
		let canvas = window.document.createElement("canvas")
		try {
			var context = canvas.getContext(type)
			if (!context) {
				throw new Error()
			}
			console.log(type, "supported")
		}	catch(e) {
			console.log(type, "not supported")
		}
	} catch(e) {
		console.log("canvas failed")
	}
})

---

I think I can just take the objects and pull things out - I need to check various things as RFP protected, so they need to be separate.

Since we are not appending the element to the page,

doh. nothing to remove. nice. BTW not creating the canvas is a tiny perf win :) woo!

[Thorin-Oakenpants]

#234 (comment)

can you add that to your gist so I can copy it, thanks

[abrahamjuliot]

Refactored: https://gist.github.com/abrahamjuliot/7baf3be8c451d23f7a8693d7e28a35e2

• added the option to check experimental-webgl separately
• added categories in final output
• added experimental concept gpuHash. The length may vary, so we can feed this to a SHA or mini hash instead of join
• dropped the supported functions since it is just browser feature detection
• added the major performance caveat detection
• added Direct3D detection

[Thorin-Oakenpants]

awesome, thx

[Thorin-Oakenpants]

the gpuBrand is redundant (but nice) - I can drop that

the gpuHash doesn't make much sense to me - sorting values could/would create collisions ? for example on it's own

• me: webgl - NVIDIA:0:1:8:16:23:24:30:32:127:1024:4095:16384:32767
• what do the numbers correspond to (we already have that data in parameters?)
  • e.g. VERTEX_SHADER_BEST_FLOAT_PRECISION: Array(3) [ 23, 127, 127 ]
• why a Set and only one of each number
  • see above I have two 127's

This doesn't make a good fingerprint for max entropy, but I get it, it's a nice wee string. Unless I'm missing something

[Thorin-Oakenpants]

gpu doesn't handle an empty string, returns ,

	let gpuV = cleanFn(parameters.UNMASKED_VENDOR_WEBGL),
		gpuR = cleanFn(parameters.UNMASKED_RENDERER_WEBGL)
	const gpu = String([gpuV, gpuR])

edit: well, it does handle it, it's just not very reader friendly :)

[Thorin-Oakenpants]

I'm confused. Top is TB (which has RFP webgl mitigations - you get the same result in FF with RFP enabled), bottom is nightly with no RFP.

The bottom test looks fine, but at first glance seem to have duplication, but the top test - why are we not returning a debugRendererInfo object with undefined items (and extensions that mimic this RFP behavior). Why is webglcontext.renderer different to gpuRenderer ?

https://bugzilla.mozilla.org/show_bug.cgi?id=1337157 - lemme look at this. I know it's supposed to return undefined or blanks and/or Mozilla

	const Categories = {
		'debugRendererInfo': [
			'UNMASKED_VENDOR_WEBGL',
			'UNMASKED_RENDERER_WEBGL',
		], // snip
	}

	parameters = { // snip
		UNMASKED_VENDOR_WEBGL: getUnmasked(context, 'UNMASKED_VENDOR_WEBGL'),
		UNMASKED_RENDERER_WEBGL: getUnmasked(context, 'UNMASKED_RENDERER_WEBGL')
	}
	parameters.DIRECT_3D = /Direct3D|D3D(\d+)/.test(parameters.UNMASKED_RENDERER_WEBGL)

	gpuVendor = parameters.UNMASKED_VENDOR_WEBGL
	gpuRenderer = parameters.UNMASKED_RENDERER_WEBGL