greggman / twgl.js

A Tiny WebGL helper Library
http://twgljs.org
MIT License
2.61k stars 258 forks source link

dynamic property with ES6 Proxy #162

Closed randName closed 4 years ago

randName commented 4 years ago

Just a suggestion, I was reading the code and came across this comment https://github.com/greggman/twgl.js/blob/addd2f6ca5fd2d7ea551eb73f981e90397026508/src/programs.js#L129

Now that ES6 Proxies are available, it is possible to dynamically get these setters with a regex.

My question is what you meant by "slow", since it's not being done every frame? (correct me if i am wrong) https://github.com/greggman/twgl.js/blob/addd2f6ca5fd2d7ea551eb73f981e90397026508/src/programs.js#L130

greggman commented 4 years ago

Proxies are not needed. The issue was that calling a function reference used to be slower than calling a function. In other words, of these 3 cases

  function callByFunc(v0, v1, v2, v3) {
    gl.clearColor(v0, v1, v2, v3);
  }

  const funcRef = gl.clearColor;  // or gl['clearColor']
  function callByFuncRef(v0, v1, v2, v3) {
    funcRef.call(gl, v0, v1, v2, v3);
  }

  const boundFuncRef = gl.clearColor.bind(gl); // or gl['clearColor'].bind(gl)
  function callByBoundFuncRef(v0, v1, v2, v3) {
    boundFuncRef(v0, v1, v2, v3);
  }

  var funcs = {
    callByFunc,
    callByFuncRef,
    callByBoundFuncRef,
  };

It used to be the top method was much faster than the bottom 2 for calling (not setup).

It appears that's no longer the case

https://jsperf.com/function-the-calls-function-vs-function-reference

So I suppose I could change the code so it looks up functions by something like

fn = gl[`uniform${type}${size}v`]
randName commented 4 years ago

It appears that's no longer the case

that's great. I haven't started using this lib yet but thanks for webgl-fundamentals