Compress GLSL for faster transfer to GPU.

I have a question/feature-request about the optimalisation of shaders within ThreeJS. After a quick look, I’ve noticed that the shaders are build from string on runtime. After this build the shaders are not compressed or optimized before sending it to the GPU (only the minified version of ThreeJS does include some sort of minified versions of the shaders).

I’m curious if you guys have looked into some sort of optimizer like: https://github.com/aras-p/glsl-optimizer/.

As the blog stated is that the performance on older hardware could rapidly improve with this optimizer. I’m not sure if current hardware will automatically optimize the given shaders, so i’m very curious if you guys have already looked into this.

Author: Fantashit

3 thoughts on “Compress GLSL for faster transfer to GPU.

  1. On one hand, building the shader at runtime is itself a means of doing final optimization – we can remove dead code, for example. If the shader were generated by an offline optimizer, it would be mostly immutable once it reached the browser.

    As that library is used for offline optimization I’m not sure we can use it directly here, but it would be neat to hear results of passing threejs shaders through that tool, and seeing if those changes are worth trying to implement in our own shader generation code.

  2. @Tostifrosti It would be great if you could gather some performance numbers of how long it takes to send the string to the gpu in different devices. I have the feeling this is would be a micro-optimisation.

  3. @Usnul You make some strong points on implementation and the ideology behind ThreeJS. I am still confinced however that an optimalisation could still be made during the parsing process of the shader.

    The reason for this is the use case of my project: visualise products. My project loads a ton of geometry/material to visualise a product (like a car). The product can be changed by enabling/disabling some materials/geometry (like color of a car). My project already have some optimalisations in place like sharing materials and enable/disable some settings based on platform.

    ThreeJS does an amazing job by visualising my products with great detail and fps (even on mobile devices). Still… I can’t help to think we can push the limit by optimizing the shader by: deleting dead code, replacing values, inlining, etc.. so the GPU has an easier task of running the shader (every shader * 60 fps).

    The blog I refered to in my first comment has proof that optimizing the shader will increase performance on mobile devices. Even Unity today will optimize homemade shaders by making multiple variants of the shader.

    As my first question stated, I was just curious if you guys had any research on this topic. After reading all the comments I am convinced that this area could still be explored. I will try to conduct a research on this topic in the future and post results in this thread or as a new issue.

    Thank you guys for your time!
    @donmccurdy @Usnul @pailhead @siamakmirzaie @TimvanScherpenzeel @mrdoob

Comments are closed.