Melhor multiplicar matrizes em javascript ou shader?

Eu estive olhando para vários exemplos de webgl. ConsiderarTutorial do MDN. Seu sombreador de vértices multiplica o vértice por uma matriz de perspectiva e uma matriz de posição mundial:

gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);

Mas ouMVMatrix é ele próprio o produto de várias transformações (tradução, rotação etc.) calculadas em javascript com a ajuda de algumas bibliotecas de matrizes.

Parece que seria mais rápido calcular seus produtos diretamente no shader; certamente é mais rápido do que fazê-lo em .js. Existe alguma razão para eles escolherem essa abordagem?

Agora, acho que você pode empilhar um número arbitrário de transformações em uma ordem arbitrária dessa maneira, o que é mais flexível. Mas digamos que não seja necessária flexibilidade, existe algum motivo para evitar transformações diretamente nos shaders? Algo como

gl_Position = uPMatrix * uRotationMatrix * uScaleMatrix * uTranslationMatrix * vec4(aVertexPosition, 1.0);

e: Para adicionar algum contexto, no meu caso em particular, renderizarei apenas entidades retangulares em 2D (principalmente sprites), portanto o número de vértices sempre será apenas 4.

Dada a sobrecarga de trazer uma biblioteca para fazer uma multiplicação rápida da matriz .js, parece que empurrar esses cálculos para o shader é definitivamente o caminho a seguir para o meu caso pessoal.

(Além disso, mesmo que fosse mais lento na balança do que em javascript, desviar os cálculos para a GPU provavelmente vale algo por si só!)

questionAnswers(2)

yourAnswerToTheQuestion