diff --git a/Makefile b/Makefile index d95dd15..53cdcc3 100644 --- a/Makefile +++ b/Makefile @@ -1,5 +1,6 @@ ESLINT=./node_modules/.bin/eslint WEBPACK=./node_modules/.bin/webpack --progress --colors +WEBPACK_DEV_SERVER=./node_modules/.bin/webpack-dev-server # ------------------------------------------------------------------------------ @@ -9,6 +10,9 @@ build: watch: $(WEBPACK) --watch --watch-poll +serve: + $(WEBPACK_DEV_SERVER) --host 0.0.0.0 --content-base ./ + # ------------------------------------------------------------------------------ lint: @@ -21,4 +25,4 @@ test: # ------------------------------------------------------------------------------ -.PHONY: build watch lint test +.PHONY: build watch serve lint test diff --git a/index.html b/index.html new file mode 100644 index 0000000..42edce4 --- /dev/null +++ b/index.html @@ -0,0 +1,7 @@ + + + + + Redirect to playground + + diff --git a/package.json b/package.json index ad65423..5fd9462 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,8 @@ "eslint": "2.7.0", "json-loader": "0.5.4", "raw-loader": "0.5.1", - "webpack": "1.13.0" + "tap": "5.7.1", + "webpack": "1.13.0", + "webpack-dev-server": "1.14.1" } } diff --git a/playground/index.html b/playground/index.html index ca4105f..c9c3d58 100644 --- a/playground/index.html +++ b/playground/index.html @@ -1,89 +1,88 @@ - - - Scratch WebGL rendering demo - + + + Scratch WebGL rendering demo + + + + +

+ +

+

+ Min: + Max: +

+ + - - + var demoWorker = new Worker('worker.js'); + renderer.connectWorker(demoWorker); + + diff --git a/playground/worker.js b/playground/worker.js index 0f10920..4b67ecc 100644 --- a/playground/worker.js +++ b/playground/worker.js @@ -29,7 +29,7 @@ function initWorker() { drawableID = id; renderer.updateDrawableProperties(drawableID, { position: [0, 0], - scale: 100, + scale: [100, 100], direction: 90 }); }); @@ -50,9 +50,9 @@ function thinkStep() { var props = {}; //props.position = [posX, posY]; - props.direction = fudge; + //props.direction = fudge; //props.pixelate = fudge; - //props.scale = 100; + props.scale = [fudge, 100]; renderer.updateDrawableProperties(drawableID, props); } diff --git a/src/Drawable.js b/src/Drawable.js index 4c5dd7d..693a73b 100644 --- a/src/Drawable.js +++ b/src/Drawable.js @@ -59,9 +59,10 @@ class Drawable { } this._position = twgl.v3.create(0, 0); - this._scale = 100; + this._scale = twgl.v3.create(100, 100); this._direction = 90; this._transformDirty = true; + this._visible = true; this._effectBits = 0; // Create a transparent 1x1 texture for temporary use @@ -292,6 +293,14 @@ Drawable.prototype.getUniforms = function () { return this._uniforms; }; +/** + * Retrieve whether this Drawable is visible. + * @returns {boolean} + */ +Drawable.prototype.getVisible = function () { + return this._visible; +}; + /** * Update the position, direction, scale, or effect properties of this Drawable. * @param {Object.} properties The new property values to set. @@ -312,10 +321,16 @@ Drawable.prototype.updateProperties = function (properties) { this._direction = properties.direction; dirty = true; } - if ('scale' in properties && this._scale != properties.scale) { - this._scale = properties.scale; + if ('scale' in properties && ( + this._scale[0] != properties.scale[0] || + this._scale[1] != properties.scale[1])) { + this._scale[0] = properties.scale[0]; + this._scale[1] = properties.scale[1]; dirty = true; } + if ('visible' in properties) { + this._visible = properties.visible; + } if (dirty) { this.setTransformDirty(); } @@ -369,9 +384,9 @@ Drawable.prototype._calculateTransform = function () { var rotation = (270 - this._direction) * Math.PI / 180; twgl.m4.rotateZ(modelMatrix, rotation, modelMatrix); - var scaledSize = twgl.v3.mulScalar( - this._uniforms.u_skinSize, this._scale / 100); - scaledSize[2] = 0; // was NaN because u_skinSize has only 2 components + var scaledSize = twgl.v3.divScalar(twgl.v3.multiply( + this._uniforms.u_skinSize, this._scale), 100); + scaledSize[3] = 0; // was NaN because the vectors have only 2 components. twgl.m4.scale(modelMatrix, scaledSize, modelMatrix); this._transformDirty = false; diff --git a/src/RenderWebGL.js b/src/RenderWebGL.js index ac0ebad..1b5cd2c 100644 --- a/src/RenderWebGL.js +++ b/src/RenderWebGL.js @@ -435,6 +435,9 @@ RenderWebGL.prototype._drawThese = function( var drawable = Drawable.getDrawableByID(drawableID); // TODO: check if drawable is inside the viewport before anything else + // Hidden drawables (e.g., by a "hide" block) are never drawn. + if (!drawable.getVisible()) continue; + var effectBits = drawable.getEnabledEffects(); var newShader = this._shaderManager.getShader(drawMode, effectBits); if (currentShader != newShader) {