Popov72

In PIX, Select Target Process => Launch Win32 and set the following 2 entries according to where Canary / Chrome is installed:

Path to executable: "C:\Users\alexis\AppData\Local\Google\Chrome SxS\Application\chrome.exe"
Working directory: "C:\Users\alexis\AppData\Local\Google\Chrome SxS\Application"
Command line arguments: --disable-gpu-sandbox --disable-direct-composition
- You can add those arguments if you want to be able to see the disassembled shader code: --enable-dawn-features=emit_hlsl_debug_symbols,disable_symbol_renaming
Launch Suspended unchecked, Launch for GPU capture and Force D3D11On12 checked

Then click on "Launch".

Important: you should close all your Canary / Chrome windows/processes before clicking on the "Launch" button!

	<html>

	<body>
	<script>
	const canvas = document.createElement('canvas');

	canvas.width = 600;
	canvas.height = 600;

	document.body.appendChild(canvas);

	import glslangModule from '../glslang';

	export const title = 'Hello Triangle';
	export const description = 'Shows rendering a basic triangle.';

	export async function init(canvas: HTMLCanvasElement) {
	const vertexShaderGLSL = `#version 450
	const vec2 pos[3] = vec2[3](vec2(0.0f, 0.5f), vec2(-0.5f, -0.5f), vec2(0.5f, -0.5f));

	void main() {

	var createScene = function() {
	var scene = new BABYLON.Scene(engine);

	var camera = new BABYLON.ArcRotateCamera("Camera", - Math.PI / 2, Math.PI / 4, 10, BABYLON.Vector3.Zero(), scene);

	camera.attachControl(canvas, true);

	BABYLON.Effect.ShadersStore["customVertexShader"]= `
	precision highp float;
	// Attributes

	uniform float zNear = 0.1;
	uniform float zFar = 500.0;

	// depthSample from depthTexture.r, for instance
	float linearDepth(float depthSample)
	{
	depthSample = 2.0 * depthSample - 1.0;
	float zLinear = 2.0 * zNear * zFar / (zFar + zNear - depthSample * (zFar - zNear));
	return zLinear;
	}