eslint

.eslintignore

@@ -0,0 +1 @@
+teapot.js

.eslintrc

@@ -0,0 +1,86 @@
+{
+  "parserOptions": {
+    "sourceType": "module"
+  },
+  "env": {
+    "browser": true,
+    "node": true,
+    "es6": true
+  },
+  "rules": {
+    "array-bracket-spacing": [2, "never"],
+    "block-spacing": [2, "always"],
+    "brace-style": [2, "1tbs", { "allowSingleLine": true }],
+    "camelcase": [2, { "properties": "never" }],
+    "comma-spacing": [2, { "before": false, "after": true }],
+    "comma-style": [2, "last"],
+    "computed-property-spacing": [2, "never"],
+    "consistent-this": 0,
+    "eol-last": 2,
+    "func-names": 1,
+    "func-style": 0,
+    "id-length": 0,
+    "indent": [2, 2, { "SwitchCase": 1, "VariableDeclarator": 1 }],
+    "jsx-quotes": 0,
+    "key-spacing": [2, { "beforeColon": false, "afterColon": true }],
+    "keyword-spacing": [2, {
+      "before": true,
+      "after": true,
+      "overrides": {
+        "return": { "after": true },
+        "throw": { "after": true },
+        "case": { "after": true }
+      }
+    }],
+    "lines-around-comment": 0,
+    "linebreak-style": 0,
+    "max-len": [2, 100, 2, {
+      "ignoreUrls": true,
+      "ignoreComments": false
+    }],
+    "max-nested-callbacks": 0,
+    "max-statements-per-line": [0, { "max": 1 }],
+    "new-cap": [2, { "newIsCap": true }],
+    "new-parens": 0,
+    "newline-after-var": 0,
+    "newline-before-return": 0,
+    "newline-per-chained-call": [2, { "ignoreChainWithDepth": 3 }],
+    "no-array-constructor": 2,
+    "no-continue": 0,
+    "no-inline-comments": 0,
+    "no-lonely-if": 0,
+    "no-mixed-spaces-and-tabs": 2,
+    "no-multiple-empty-lines": [2, { "max": 2, "maxEOF": 1 }],
+    "no-negated-condition": 0,
+    "no-nested-ternary": 2,
+    "no-new-object": 2,
+    "no-spaced-func": 2,
+    "no-ternary": 0,
+    "no-trailing-spaces": 2,
+    "no-underscore-dangle": [2, { "allowAfterThis": false }],
+    "no-unneeded-ternary": [2, { "defaultAssignment": false }],
+    "no-whitespace-before-property": 2,
+    "object-curly-spacing": [2, "always"],
+    "one-var": [2, "never"],
+    "one-var-declaration-per-line": [2, "always"],
+    "operator-assignment": 0,
+    "operator-linebreak": 0,
+    "padded-blocks": [2, "never"],
+    "quote-props": [2, "as-needed", { "keywords": false, "unnecessary": true, "numbers": false }],
+    "quotes": [2, "single", "avoid-escape"],
+    "id-match": 0,
+    "require-jsdoc": 0,
+    "semi-spacing": [2, { "before": false, "after": true }],
+    "semi": [2, "always"],
+    "sort-vars": 0,
+    "space-before-blocks": 2,
+    "space-before-function-paren": [2, { "anonymous": "always", "named": "never" }],
+    "space-in-parens": [2, "never"],
+    "space-infix-ops": 2,
+    "space-unary-ops": 0,
+    "spaced-comment": [2, "always", {
+      "markers": ["=", "!"]
+    }],
+    "wrap-regex": 0
+  }
+}

circle.yml

@@ -2,10 +2,13 @@ version: 1
 
 machine:
   node:
-    version: 0.10.22
+    version: 9.5.0
 
 test:
   pre:
-      - cat /dev/null | sbt test:compile
+    - npm config set registry="http://registry.npmjs.org/"
+    - npm install -g eslint
+    - eslint examples/**/*.js
+    - cat /dev/null | sbt test:compile
   post:
     - cat /dev/null | sbt test:test

examples/pathtracer/pathracer-calder.js

@@ -126,7 +126,10 @@ const shaderPipeline = cgl.pixelPipeline(
       vec3 cameraLocationStart = vec3(0, 0, 0);
       vec3 cameraLocationEnd = vec3(1, 3, 1);
       // Slide back and forth between camera locations
-      vec3 cameraLocation = mix(cameraLocationStart, cameraLocationEnd, sin(float(frame) / (CAMERA_CYCLE_LENGTH * FRAMES_PER_SECOND)));
+      vec3 cameraLocation = mix(
+        cameraLocationStart,
+        cameraLocationEnd,
+        sin(float(frame) / (CAMERA_CYCLE_LENGTH * FRAMES_PER_SECOND)));
       vec3 cameraTarget = vec3(0.0, 10.0, 0.0);
       vec3 cameraUp = vec3(0, 0, 1);
       float cameraDistance = 0.3;
@@ -221,7 +224,8 @@ function draw() {
   shaderPipeline.time = (new Date()).getTime() - startTime;
   shaderPipeline.frame = frame++;
 
-  // Calder knows the size each item should be and the length of the buffer so we shouldn't need to specify number of vertices
+  // Calder knows the size each item should be and the length of the buffer so we shouldn't need
+  // to specify number of vertices
   shaderPipeline.draw();
 
   requestAnimationFrame(draw);

examples/pathtracer/pathtracer.js

@@ -136,7 +136,10 @@ void main() {
   vec3 cameraLocationEnd = vec3(1, 3, 1);
 
   // Slide back and forth between camera locations
-  vec3 cameraLocation = mix(cameraLocationStart, cameraLocationEnd, sin(float(frame) / (CAMERA_CYCLE_LENGTH * FRAMES_PER_SECOND)));
+  vec3 cameraLocation = mix(
+    cameraLocationStart,
+    cameraLocationEnd,
+    sin(float(frame) / (CAMERA_CYCLE_LENGTH * FRAMES_PER_SECOND)));
   vec3 cameraTarget = vec3(0.0, 10.0, 0.0);
   vec3 cameraUp = vec3(0, 0, 1);
   float cameraDistance = 0.3;
@@ -241,7 +244,7 @@ function draw() {
   gl.depthFunc(gl.LEQUAL);
   gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
   gl.useProgram(shaderProgram);
-  
+
   gl.bindBuffer(gl.ARRAY_BUFFER, position);
   gl.vertexAttribPointer(
     info.vertexPosition,
@@ -251,13 +254,13 @@ function draw() {
     0,
     0);
   gl.enableVertexAttribArray(info.vertexPosition);
-  
+
   gl.uniform1f(info.time, (new Date()).getTime() - startTime);
   gl.uniform1i(info.frame, frame++);
   gl.uniform2f(info.resolution, stage.width, stage.height);
-  
+
   gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4);
-  
+
   requestAnimationFrame(draw);
 }
 

examples/sao/sao-calder.js

@@ -66,19 +66,19 @@ const diffuse = cgl.texture({
   wrapS: cgl.CLAMP_TO_EDGE,
   wrapT: cgl.CLAMP_TO_EDGE
 });
-const normal = cgl.texture({width: canvas.width, height: canvas.height});
-const position = cgl.texture({width: canvas.width, height: canvas.height});
-const depth = cgl.texture({type: depth, width: canvas.width, height: canvas.height});
+const normal = cgl.texture({ width: canvas.width, height: canvas.height });
+const position = cgl.texture({ width: canvas.width, height: canvas.height });
+const depth = cgl.texture({ type: depth, width: canvas.width, height: canvas.height });
 
 // Set up the geometry to render
 
 // The teapot model didn't come with colors for each vertex so let's add some
 teapot.vertexColor = teapot.vertexPositions.map((_, i) => {
   // There are 3 components to position and 3 components to color, so this maps xyz to rgb
   switch (i % 3) {
-    case 0: return 92/256;
-    case 1: return 130/256;
-    case 2: return 153/256;
+    case 0: return 92 / 256;
+    case 1: return 130 / 256;
+    case 2: return 153 / 256;
   }
 });
 
@@ -127,11 +127,11 @@ geometryPass.projection = projectionMatrix;
 geometryPass.camera = cameraMatrix;
 
 
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 // Pass 2: Ambient Occlusion
 //
 // Calculates shadows based on buffered info
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 
 const aoPass = cgl.pixelPipeline(
   cgl.fragment `
@@ -234,7 +234,7 @@ const aoPass = cgl.pixelPipeline(
   `
 ).build(gl);
 
-const ao = cgl.texture({width: canvas.width, height: canvas.height});
+const ao = cgl.texture({ width: canvas.width, height: canvas.height });
 
 aoPass.screenSize = [canvas.width, canvas.height];
 
@@ -262,7 +262,8 @@ const finalPass = cgl.pixelPipeline(
       for (int x = -4; x <= 4; x++) {
         for (int y = -4; y <= 4; y++) {
           if (x != 0 || y != 0) {
-            vec2 samplePosition = screenSpaceOrigin + vec2(float(x * SCALE), float(y * SCALE)) * vec2(1.0/screenSize.x, 1.0/screenSize.y);
+            vec2 samplePosition = screenSpaceOrigin +
+              vec2(float(x * SCALE), float(y * SCALE)) * vec2(1.0/screenSize.x, 1.0/screenSize.y);
             float ao = texture2D(aoBuf, samplePosition).x;
             float sampleDepth = texture2D(depthBuf, samplePosition).z;
             int kx = 4 - (x < 0 ? -x : x);

examples/sao/sao.js

@@ -5,11 +5,11 @@ const extFloat = gl.getExtension('OES_texture_float');
 const extDepth = gl.getExtension('WEBGL_depth_texture');
 const extDeriv = gl.getExtension('OES_standard_derivatives');
 
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 // Pass 1: Geometry
 //
 // Renders color, normal, and position to buffers
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 
 const vertexShaderSource = `
 precision highp float;
@@ -118,7 +118,17 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
 gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
-gl.texImage2D(gl.TEXTURE_2D, 0, gl.DEPTH_COMPONENT, canvas.width, canvas.height, 0, gl.DEPTH_COMPONENT, gl.UNSIGNED_SHORT, null);
+gl.texImage2D(
+  gl.TEXTURE_2D,
+  0,
+  gl.DEPTH_COMPONENT,
+  canvas.width,
+  canvas.height,
+  0,
+  gl.DEPTH_COMPONENT,
+  gl.UNSIGNED_SHORT,
+  null
+);
 
 // In order to be able to render to multiple buffers, we need to bind each texture
 // to a color attachment. Unfortunately there are just constants for each. It's not pretty.
@@ -137,9 +147,9 @@ gl.framebufferTexture2D(
 teapot.vertexColor = teapot.vertexPositions.map((_, i) => {
   // There are 3 components to position and 3 components to color, so this maps xyz to rgb
   switch (i % 3) {
-    case 0: return 92/256;
-    case 1: return 130/256;
-    case 2: return 153/256;
+    case 0: return 92 / 256;
+    case 1: return 130 / 256;
+    case 2: return 153 / 256;
   }
 });
 
@@ -195,7 +205,8 @@ const index = gl.createBuffer();
 gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index);
 gl.bufferData(
   gl.ELEMENT_ARRAY_BUFFER,
-  new Uint16Array([...teapot.indices, ...ground.indices.map(i => i + teapot.vertexPositions.length/3)]),
+  new Uint16Array(
+    [...teapot.indices, ...ground.indices.map(i => i + teapot.vertexPositions.length / 3)]),
   gl.STATIC_DRAW);
 
 const fieldOfView = 45 * Math.PI / 180;
@@ -213,12 +224,11 @@ mat4.translate(cameraMatrix, cameraMatrix, [0.0, 0.0, -40.0]);
 const teapotTransform = mat4.create();
 
 
-
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 // Pass 2: Ambient Occlusion
 //
 // Calculates shadows based on buffered info
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 
 const vertexShaderSourceAO = `
 precision highp float;
@@ -411,15 +421,13 @@ gl.bufferData(
   gl.STATIC_DRAW);
 
 
-
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 // Pass 3: Final shading
 //
 // Combines AO and Phong shading
-//////////////////////////////////////////////////
+// ////////////////////////////////////////////////
 
 const vertexShaderSourceFinal = vertexShaderSourceAO;
-
 const fragmentShaderSourceFinal = `
 #extension GL_OES_standard_derivatives : enable
 precision highp float;
@@ -444,7 +452,8 @@ float blurAO(vec2 screenSpaceOrigin) {
   for (int x = -4; x <= 4; x++) {
     for (int y = -4; y <= 4; y++) {
       if (x != 0 || y != 0) {
-        vec2 samplePosition = screenSpaceOrigin + vec2(float(x * SCALE), float(y * SCALE)) * vec2(1.0/screenSize.x, 1.0/screenSize.y);
+        vec2 samplePosition = screenSpaceOrigin +
+          vec2(float(x * SCALE), float(y * SCALE)) * vec2(1.0/screenSize.x, 1.0/screenSize.y);
         float ao = texture2D(aoBuf, samplePosition).x;
         float sampleDepth = texture2D(depthBuf, samplePosition).z;
         int kx = 4 - (x < 0 ? -x : x);
@@ -573,8 +582,10 @@ function draw() {
     ext.COLOR_ATTACHMENT1_WEBGL, // gl_FragData[1]
     ext.COLOR_ATTACHMENT2_WEBGL, // gl_FragData[2]
   ]);
-
-  gl.drawElements(gl.TRIANGLES, teapot.indices.length + ground.indices.length, gl.UNSIGNED_SHORT, 0);
+
+  gl.drawElements(
+    gl.TRIANGLES, teapot.indices.length +
+      ground.indices.length, gl.UNSIGNED_SHORT, 0);
 
   gl.disableVertexAttribArray(info.vertexPosition);
   gl.disableVertexAttribArray(info.vertexNormal);