• Stars
    star
    119
  • Rank 297,930 (Top 6 %)
  • Language
    JavaScript
  • License
    MIT License
  • Created over 4 years ago
  • Updated about 1 year ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Texture loading utility for WebGL and WebGPU

Web Texture Tool

A low-frills library for loading a large variety of image formats into WebGL or WebGPU textures as efficiently as possible.

WARNING

This repo is still a work in progress! The interface is subject to change as the scope and functionality of the library evolves.

Basic Usage

First, an appropriate instance of WebGLTextureLoader must be created. If your application is using WebGL, an instance of the extended WebGLTextureLoader class should be constructed, passing the WebGL context:

import { WebGLTextureLoader } from "web-texture-tool/webgl-texture-loader.js"

// Get a WebGL context
const canvas = document.createElement('canvas');
const gl = canvas.getContext('webgl');

const loader = new WebGLTextureLoader(gl);

Alternately, a WebGPUTextureLoader can be created for use with WebGPU devices:

import { WebGPUTextureLoader } from "web-texture-tool/webgpu-texture-loader.js"

// Get a WebGPU device
const adapter = await navigator.gpu.requestAdapter();
const device = await adapter.requestDevice();

const loader = new WebGPUTextureLoader(device);

These classes have identical interfaces aside from the constructor.

Once you have an instance, loading most textures is as easy as calling fromUrl:

const result = await loader.fromUrl('textures/checkerboard.jpg');

The method returns a promise which resolves to a WebTextureResult object, which contains:

  • texture, a WebGLTexture or GPUTexture
  • width, height, and depth of the texture in pixels
  • type, the WebGPU texture type such as 2d or cube-map
  • format, the WebGPU texture format such as 'rgba8unorm'
  • mipLevels, the number of mipmap levels the texture contains

Texture dimensions, type, and format should be treated as immutable, as they will be allocated that way with any APIs that allow or enforce it.

Overriding extensions

When loading textures from a URL the loader will try to determine the file type automatically based on any extension it finds in the path. For example, with the code:

const result = await loader.fromUrl('textures/FLOOR_1.PNG?debug=1');

The automatically determined extension will be png, and so the file will attempt to load as a PNG image file. (Note that query string are ignored.)

In some cases an automatically parsed extension may not be able to be determined or may be wrong. For example:

const result = await loader.fromUrl('assets.php?id=123');

In this case the URL may return an image but by default the system will assume that the extension is php, which has no loader associated with it since it's not an image format. If, however, you know that this page returns JPEG images, you can explicitly indicate it by setting the mimeType option like so:

const result = await wtt.textureFromUrl('assets.php?id=123', { mimeType: 'image/jpeg' });

Now the returned data will attempt to parse as a JPEG.

More Repositories

1

gl-matrix

Javascript Matrix and Vector library for High Performance WebGL apps
JavaScript
5,369
star
2

webgpu-best-practices

A series of docs detailing best practices for developing with WebGPU
HTML
337
star
3

webgl-quake3

WebGL Quake 3 level renderer
JavaScript
264
star
4

webgl-source

WebGL renderer for Source Engine levels
JavaScript
239
star
5

webgpu-clustered-shading

Personal experimental project to implement clustered shading with WebGPU.
JavaScript
182
star
6

game-shim

Browser shims to normalize game-centric API
JavaScript
129
star
7

webgl2-particles-2

Updated version of particles demo, WebGL 2 only.
JavaScript
124
star
8

webgl-texture-utils

Utilities for working with WebGL textures
JavaScript
122
star
9

semilive

A Sublime Text plugin for "Live" coding
Python
122
star
10

building-the-game

Source for the series of blog posts "Building the Game" on Tojicode
JavaScript
114
star
11

webvr.info

Source code for the WebVR.info website
HTML
110
star
12

spookyball

WebGPU-powered, Halloween-themed breakout game
JavaScript
96
star
13

webgpu-metaballs

Metaballs rendered in WebGPU
JavaScript
74
star
14

texture-tester

Simple page for testing WebGL texture support
HTML
70
star
15

webgpu-test

Testing WebGPU
JavaScript
69
star
16

webgpu-gltf-case-study

A case study in effective WebGPU patterns for rendering glTF models
Ruby
61
star
17

xr-dinosaurs

Roar!
JavaScript
61
star
18

hello-triangle-webgpu

Well commented hello triangle example for WebGPU
HTML
61
star
19

one-triangle-web

Rendering one triangle, the WebGL/WebGPU way
HTML
58
star
20

wgsl-preprocessor

A simple, template literals-based preprocessor for WGSL shaders
JavaScript
55
star
21

js-struct

Utility to assist in parsing c-style structs from an ArrayBuffer
JavaScript
54
star
22

chrome-webvr-issues

Stub repository for tracking bugs related to Chrome's experimental WebVR support
53
star
23

burrow

Toy WebGPU Deferred Renderer
TypeScript
42
star
24

webgl-utils

Lightweight, standalone WebGL utilities
JavaScript
40
star
25

webgl-ios-rage

WebGL renderer for iOS Rage levels
JavaScript
40
star
26

webgpu-shadow-playground

Experimenting with Shadow techniques like Cascading Shadow Maps
JavaScript
40
star
27

webgl-samples

Random WebGL samples, typically demonstrating specific techniques
JavaScript
40
star
28

webgpu-bundle-culling

A WebGPU demonstration of using frustum culling with render bundles through indirect instanced draw calls.
JavaScript
34
star
29

webxr-particles

Variant of WebGL 2 particles demo tuned for WebXR
JavaScript
31
star
30

rosetta

Comparisons of shaders across multiple APIs
GLSL
22
star
31

shader-perf

Demonstration of asynchronous shader loading
HTML
20
star
32

webxr-scene-optimization

A brief overview of techniques for optimizing 3D scenes for WebXR
HTML
19
star
33

webgl2-crowd

Demonstrates animation "baking" using transform feedback.
JavaScript
18
star
34

xr-critter

Pet Me!
JavaScript
18
star
35

webgl-iframe

JavaScript
16
star
36

crocotile-webgl

Dirt simple WebGL loader/renderer for Crocotile 3D files
JavaScript
15
star
37

pristine-grid-webgpu

A WebGPU implementation of the "Pristine Grid" technique
JavaScript
13
star
38

H3

Hyperactive Hexagonal Havoc!
JavaScript
11
star
39

io-gallery

Simple WebVR gallery app for Google I/O 2017
JavaScript
9
star
40

sponza-optimized

A version of the Sponza glTF that's been optimized for file size and instancing
7
star
41

webxr-logo

A 3D variant of a proposed WebXR logo in Three.js (based on code by @cwilso)
HTML
7
star
42

NoRecruiterSoliciting

Please do not contact me with job opportunities. I am happy with my current position.
6
star
43

webgpu-external-test

Tests consuming external textures with WebGPU
JavaScript
5
star
44

webgpu-map-sync

Coding WebGPU atrocities in hopes that future generations won't have to.
JavaScript
5
star
45

xr-lighting

Test page for WebXR Lighting Estimation API
JavaScript
5
star
46

is-it-webgpu

A Chrome extension that informs you if a page is using WebGPU or not.
JavaScript
4
star
47

dinosaurs-static

Frozen in time for the benefit of Chrome testing
HTML
3
star
48

DartGB

A Gameboy emulator in Dart
Dart
3
star
49

positional-audio-test

A simple test for positional web audio
HTML
2
star
50

toji.dev

Personal "About Me" website.
JavaScript
2
star
51

chrome-gpu-blinkenlights

Makes a light blink. Not for you.
JavaScript
1
star