Shader caching approaches (v2)

Revision 2 of this benchmark created on July 16, 2024

Setup

const vert = "void main(){gl_Position=vec4(0);}";
const frag = "void main(){gl_FragColor=vec4(0);}";
const vertStorage = new Map();
const fragStorage = new Map();
const programStorage = new Map();
const shader = {
  vert,
  frag,
  _vertPlusFrag: vert + frag,
  _programId: hash(vert, hash(frag)),
  _vertId: hash(vert),
  _fragId: hash(frag),
};

vertStorage.set(shader.vert, shader.vert);
vertStorage.set(shader._vertId, shader.vert);
fragStorage.set(shader.frag, shader.frag);
fragStorage.set(shader._fragId, shader.frag);
programStorage.set(shader.vert, shader.vert);
programStorage.set(shader._programId, shader.vert);

function getOrCreateShader_hash() {
  const vertKey = hash(shader.vert);
  const fragKey = hash(shader.frag);
  const programKey = hash(shader.vert, fragKey);

  const storedVert = vertStorage.get(vertKey);
  if (!storedVert) vertStorage.set(vertKey, shader.vert);

  const storedFrag = fragStorage.get(shader.frag);
  if (!storedFrag) fragStorage.set(fragKey, shader.frag);

  const storedProgram = programStorage.get(programKey);
  if (!storedProgram) programStorage.set(programKey, shader.vert);
}

function getOrCreateShader_string() {
  const vertKey = shader.vert;
  const fragKey = shader.frag;
  const programKey = shader.vert + shader.frag;

  const storedVert = vertStorage.get(vertKey);
  if (!storedVert) vertStorage.set(vertKey, shader.vert);

  const storedFrag = fragStorage.get(shader.frag);
  if (!storedFrag) fragStorage.set(fragKey, shader.frag);

  const storedProgram = programStorage.get(programKey);
  if (!storedProgram) programStorage.set(programKey, shader.vert);
}

function getOrCreateShader_cachedString() {
  const vertKey = shader.vert;
  const fragKey = shader.frag;
  const programKey = shader._vertPlusFrag;

  const storedVert = vertStorage.get(vertKey);
  if (!storedVert) vertStorage.set(vertKey, shader.vert);

  const storedFrag = fragStorage.get(shader.frag);
  if (!storedFrag) fragStorage.set(fragKey, shader.frag);

  const storedProgram = programStorage.get(programKey);
  if (!storedProgram) programStorage.set(programKey, shader.vert);
}

function getOrCreateShader_cachedHash() {
  const vertKey = shader._vertId;
  const fragKey = shader._fragId;
  const programKey = shader._programId;

  const storedVert = vertStorage.get(vertKey);
  if (!storedVert) vertStorage.set(vertKey, shader.vert);

  const storedFrag = fragStorage.get(shader.frag);
  if (!storedFrag) fragStorage.set(fragKey, shader.frag);

  const storedProgram = programStorage.get(programKey);
  if (!storedProgram) programStorage.set(programKey, shader.vert);
}

function hash(str, seed = 0) {
  let h1 = 0xdeadbeef ^ seed,
    h2 = 0x41c6ce57 ^ seed;
  for (let i = 0, ch; i < str.length; i++) {
    ch = str.charCodeAt(i);
    h1 = Math.imul(h1 ^ ch, 2654435761);
    h2 = Math.imul(h2 ^ ch, 1597334677);
  }
  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507);
  h1 ^= Math.imul(h2 ^ (h2 >>> 13), 3266489909);
  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507);
  h2 ^= Math.imul(h1 ^ (h1 >>> 13), 3266489909);
  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
}

Test runner

for (let i = 0; i < 100; i++) {
  getOrCreateShader_hash();	
}

for (let i = 0; i < 100; i++) {
  getOrCreateShader_string();	
}

for (let i = 0; i < 100; i++) {
  getOrCreateShader_cachedString();
}

for (let i = 0; i < 100; i++) {
  getOrCreateShader_cachedHash();
}

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published on July 16, 2024
• Revision 2: published on July 16, 2024