Popov72

## webgpuShadow.html
<html>

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

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

        document.body.appendChild(canvas);

## webgpu_shadow.ts
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() {

## using_pix_with_canary.md

      
              1 file
            
          
              1 fork
            
          
              5 comments
            
          
              15 stars
            
          
                Popov72
                / using_pix_with_canary.md
            
            
              Last active
              February 14, 2024 04:36
            
              
                Using PIX with Chrome
              
          
    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!

  
## playground.js
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

## gist:7e856b2589f659b2e9ff7ca0a7a6f815
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;
}
	<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;
	}