Compiling three.js with the Google Closure compiler (and some news for Java devs)

Hello all,
I’d like to share my experience with adopting three.js for processing it with the closure compiler. I won’t begin from the very basics hoping that most of us are somewhat familiar with these 2 beasts.

As some of you might know, Closure compiler can produce highly-optimized and efficient code in advanced compilation mode, but it requires following several rules and annotating some parts of the code to help closure recognize types of var for better optimization. One day I thought to try to make it work with three.js.

I started my POC from a simple cube example and did very naive refactoring of a few classes to make them processable by closure. My base version was 126.1, so i ported all non-es6 js to es6 classes. It’s so nice that 128 version has more es6 classes now!

In the end, i got a working js with size of ~299kb and 94.2% typed rate.

You can take a look here: three.js/src at closure_compiler · treblereel/three.js · GitHub

  • box.js is a simple scene
  • index.html is a starter
  • test.js is resulted javascript

If you’d like to compile it by yourself, you’ll need to set a proper path to closure by yourself in run.sh.

So i am curios whether the three.js community is interested in closure ? I understand that closure annotations will never be merged in the base project, but maybe I (with some support) could maintain a fork?

Part 2: The Java part

Actually i also write a wrapper that allows Java programmers to use three.js for developing web applications on Java. Initially it was based on GWT but GWT time has come to an end. So we’re creating a new modern stack of tools based on j2cl (java to js) and closure.

So if you’d like to take a look how it can be done please check this repo:

https://github.com/treblereel/three4g/tree/j2cl+es6_modules

It’s the same cube demo but written in java, it’s compiled into a 298kb file with the same typed rate.

I’ll be happy to have any feedback!

2 Likes