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

Compiling three.js with the Google Closure compiler can help improve its performance and reduce its file size. Here are the steps you can follow to compile three.js with the Closure compiler:

  1. Download the Closure compiler: You can download the Closure compiler from the official Google Closure Tools page.

  2. Extract the Closure compiler: Extract the Closure compiler to a directory on your computer.

  3. Download three.js: You can download the latest version of three.js from the official three.js repository on GitHub.

  4. Create a build directory: Create a new directory where you want to put the compiled version of three.js.

  5. Compile three.js: Navigate to the Closure compiler directory and run the following command:

java -jar compiler.jar --js=path/to/three.js --js_output_file=path/to/build/three.min.js

  1. Replace path/to/three.js with the actual path to three.js on your computer, and path/to/build/three.min.js with the path to the build directory you created in step 4.

Use the compiled version: Replace the reference to the original three.js file in your HTML or JavaScript code with the path to the compiled version (i.e., path/to/build/three.min.js).