Skip to content

Instantly share code, notes, and snippets.

View munrocket's full-sized avatar

munrocket

142 followers · 104 following
View GitHub Profile
@slimbuck
slimbuck / webgpu_metal_capture.txt
Created May 13, 2024 08:47
Capturing WebGPU metal trace on MacOS
1) Clone and build WebKit
git clone https://github.com/WebKit/WebKit.git WebKit
cd WebKit
Tools/Scripts/build-webkit -cmakeargs="-DENABLE_WEBGPU_BY_DEFAULT=1" --debug
2) Run your app
__XPC_METAL_CAPTURE_ENABLED=1 Tools/Scripts/run-minibrowser --debug --url http://localhost:5000/index.html#/loaders/gsplat
@0beqz
0beqz / BoxProjectedEnvMapHelper.js
Last active February 29, 2024 01:45
Updated code to box-project env-maps in three.js (r137) - credits go to codercat (https://codercat.tk) for the box-projecting code
import * as THREE from "three"
// credits for the box-projecting shader code go to codercat (https://codercat.tk)
const worldposReplace = /* glsl */`
#if defined( USE_ENVMAP ) || defined( DISTANCE ) || defined ( USE_SHADOWMAP )
vec4 worldPosition = modelMatrix * vec4( transformed, 1.0 );
#ifdef BOX_PROJECTED_ENV_MAP
vWorldPosition = worldPosition.xyz;
@kripken
kripken / README.markdown
Last active April 26, 2024 10:59

Emscripten as a linker for Zig and C

This shows how to build a nontrivial program using Zig+Emscripten or C+Emscripten. In both cases Emscripten is only used as a linker, that is the frontend is either zig or clang.

"Nontrivial" here means the program uses interesting Emscripten features:

  • Asyncify
  • Full GLES3 support
  • GLFW3 support
@vorg
vorg / webgpu-screenshot.js
Last active August 31, 2021 00:26
Minimal example of making screenshot of WebGPU canvas
//Tested on Chrome Canary Version 94.0.4598.0, macOS 11.5
const canvas = document.createElement("canvas");
canvas.width = 512;
canvas.height = 512;
document.body.appendChild(canvas);
const clearColor = {
r: Math.random(),
g: Math.random(),
@Popov72
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!

@lorenzofox3
lorenzofox3 / package.json
Last active January 24, 2020 11:36
typescript setup example
{
"name": "typescript-setup",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"compile": "tsc",
"test": "node -r esm ./spec.js",
"dev": "npm run compile -- -w"
},
@rotoglup
rotoglup / 201909 - a look into threejs editor.md
Last active February 10, 2022 10:26
201909 - A look into threejs editor app

A look into threejs editor

My notes while reading the source code from threejs Editor app, as I've been curious about :

  • the editor architecture
  • the undo/redo system
  • the camera control behaviour & code
  • the object transform gizmos behaviours & code
@dropmeaword
dropmeaword / photogrammetry.md
Created October 1, 2018 20:19
Some notes about creating 3D models from pictures

Photogrammetry software

This is the open source solution that I have used for the Giampilieri project. The interface is less than ideal, saving projects is confusing, it's fairly slow to process and needs CUDA for high density mesh calculations.

https://colmap.github.io/

Also open source kit, but seems to be a collection of libraries for real time pipelines.

https://alicevision.github.io/

@TimvanScherpenzeel
TimvanScherpenzeel / support-table-webgl-extensions.md
Created April 3, 2018 12:03
Support table - WebGL extensions

| Device | OS | OS version | Browser | Browser version | ANGLE_instanced_arrays | EXT_blend_minmax | EXT_frag_depth | EXT_shader_texture_lod | EXT_texture_filter_anisotropic | WEBKIT_EXT_texture_filter_anisotropic | OES_element_index_uint | OES_standard_derivatives | OES_texture_float | OES_texture_float_linear | OES_texture_half_float | OES_texture_half_float_linear | OES_vertex_array_object | WEBGL_compressed_texture_s3tc | WEBKIT_WEBGL_compressed_texture_s3tc | WEBGL_debug_renderer_info | WEBGL_debug_shaders | WEBGL_depth_texture | MOZ_WEBGL_depth_texture | WEBKIT_WEBGL_depth_texture | WEBGL_draw_buffers | WEBGL_lose_context | MOZ_WEBGL_lose_context | WEBKIT_WEBGL_lose_context | EXT_color_buffer_float | EXT_color_buffer_half_float | EXT_disjoint_timer_query | EXT_disjoint_timer_query_webgl2 | EXT_sRGB | WEBGL_color_buffer_float | WEBGL_compressed_texture_astc | MOZ_WEBGL_compressed_texture_atc | WEBKIT_WEBGL_compressed_texture_atc | WEBGL_compressed_texture_atc | WEBGL_compresse

@cecilemuller
cecilemuller / index.html
Last active January 4, 2023 16:04
Record three.js to WebM video using CCapture.js
<!DOCTYPE HTML>
<html lang="en">
<head>
<title>Record WebGL to WebM (Chrome only)</title>
<meta charset="utf-8">
<link rel="stylesheet" href="styles.css" charset="utf-8">
</head>
<body>
<div class="buttons">