t3d - npm Package Compare versions

Comparing version 0.2.3 to 0.2.4

examples/jsm/controls/TransformControls.js

 import {
 	Object3D, Vector2, Vector3, Euler, Plane, Matrix4, Quaternion,
-	Mesh, BasicMaterial, CylinderGeometry, PlaneGeometry, BoxGeometry, SphereGeometry, Geometry, Attribute, Buffer, DRAW_SIDE, DRAW_MODE
+	Mesh, BasicMaterial, ShaderLib,
+	CylinderGeometry, PlaneGeometry, BoxGeometry, SphereGeometry, Geometry, Attribute, Buffer,
+	MATERIAL_TYPE, DRAW_SIDE, DRAW_MODE
 } from 't3d';
@@ -280,2 +282,11 @@ import { TorusBuilder } from '../geometries/builders/TorusBuilder.js';
 
+const redColor = [1.0, 0.25, 0.25];
+const greenColor = [0.5, 0.8, 0.2];
+const blueColor = [0.3, 0.5, 1.0];
+const whiteColor = [1.0, 1.0, 1.0];
+const grayColor = [0.75, 0.75, 0.75];
+const yellowColor = [1.0, 1.0, 0.0];
+
+const gizmoRenderOrder = 100;
+
 // for snap
@@ -371,4 +382,4 @@ const _position = new Vector3();
 	_createAxis() {
-		const lineX = new GizmoMesh('line', 'x', [1.0, 0.25, 0.25], new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2), 1.5);
-		const arrowX = new GizmoMesh('arrow', 'x', [1.0, 0.25, 0.25], new Vector3(1.5, 0, 0), new Euler(0, 0, -Math.PI / 2));
+		const lineX = new GizmoMesh('line', 'x', redColor, new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2), 1.5);
+		const arrowX = new GizmoMesh('arrow', 'x', redColor, new Vector3(1.5, 0, 0), new Euler(0, 0, -Math.PI / 2));
 		this._translateControlMap.set('x', [lineX, arrowX]);
@@ -378,8 +389,8 @@ this.add(lineX);
 
-		const pickX = new GizmoMesh('pickAxis', 'x', [1.0, 1.0, 1.0], new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2));
+		const pickX = new GizmoMesh('pickAxis', 'x', whiteColor, new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2));
 		pickX.visible = false;
 		this.add(pickX);
 
-		const lineY = new GizmoMesh('line', 'y', [0.5, 0.8, 0.2], new Vector3(0, 0.75, 0), new Euler(0, 0, 0), 1.5);
-		const arrowY = new GizmoMesh('arrow', 'y', [0.5, 0.8, 0.2], new Vector3(0, 1.5, 0), new Euler(0, 0, 0));
+		const lineY = new GizmoMesh('line', 'y', greenColor, new Vector3(0, 0.75, 0), new Euler(0, 0, 0), 1.5);
+		const arrowY = new GizmoMesh('arrow', 'y', greenColor, new Vector3(0, 1.5, 0), new Euler(0, 0, 0));
 		this._translateControlMap.set('y', [lineY, arrowY]);
@@ -389,8 +400,8 @@ this.add(lineY);
 
-		const pickY = new GizmoMesh('pickAxis', 'y', [1.0, 1.0, 1.0], new Vector3(0, 0.75, 0), new Euler(0, 0, 0));
+		const pickY = new GizmoMesh('pickAxis', 'y', whiteColor, new Vector3(0, 0.75, 0), new Euler(0, 0, 0));
 		pickY.visible = false;
 		this.add(pickY);
 
-		const lineZ = new GizmoMesh('line', 'z', [0.3, 0.5, 1.0], new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0), 1.5);
-		const arrowZ = new GizmoMesh('arrow', 'z', [0.3, 0.5, 1.0], new Vector3(0, 0, 1.5), new Euler(Math.PI / 2, 0, 0));
+		const lineZ = new GizmoMesh('line', 'z', blueColor, new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0), 1.5);
+		const arrowZ = new GizmoMesh('arrow', 'z', blueColor, new Vector3(0, 0, 1.5), new Euler(Math.PI / 2, 0, 0));
 		this._translateControlMap.set('z', [lineZ, arrowZ]);
@@ -400,31 +411,31 @@ this.add(lineZ);
 
-		const pickZ = new GizmoMesh('pickAxis', 'z', [1.0, 1.0, 1.0], new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0));
+		const pickZ = new GizmoMesh('pickAxis', 'z', whiteColor, new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0));
 		pickZ.visible = false;
 		this.add(pickZ);
 
-		const planeXY = new GizmoMesh('plane', 'xy', [0.3, 0.5, 1.0], new Vector3(0.15, 0.15, 0), new Euler(Math.PI / 2, 0, 0), 0.3);
+		const planeXY = new GizmoMesh('plane', 'xy', blueColor, new Vector3(0.15, 0.15, 0), new Euler(Math.PI / 2, 0, 0), 0.3);
 		this._translateControlMap.set('xy', [planeXY]);
 		this.add(planeXY);
 
-		const pickXY = new GizmoMesh('plane', 'xy', [1.0, 1.0, 1.0], new Vector3(0.25, 0.25, 0), new Euler(Math.PI / 2, 0, 0), 0.5);
+		const pickXY = new GizmoMesh('plane', 'xy', whiteColor, new Vector3(0.25, 0.25, 0), new Euler(Math.PI / 2, 0, 0), 0.5);
 		pickXY.visible = false;
 		this.add(pickXY);
 
-		const planeYZ = new GizmoMesh('plane', 'yz', [1.0, 0.25, 0.25], new Vector3(0, 0.15, 0.15), new Euler(0, 0, Math.PI / 2), 0.3);
+		const planeYZ = new GizmoMesh('plane', 'yz', redColor, new Vector3(0, 0.15, 0.15), new Euler(0, 0, Math.PI / 2), 0.3);
 		this._translateControlMap.set('yz', [planeYZ]);
 		this.add(planeYZ);
 
-		const pickYZ = new GizmoMesh('plane', 'yz', [1.0, 1.0, 1.0], new Vector3(0, 0.25, 0.25), new Euler(0, 0, Math.PI / 2), 0.5);
+		const pickYZ = new GizmoMesh('plane', 'yz', whiteColor, new Vector3(0, 0.25, 0.25), new Euler(0, 0, Math.PI / 2), 0.5);
 		pickYZ.visible = false;
 		this.add(pickYZ);
 
-		const planeXZ = new GizmoMesh('plane', 'xz', [0.5, 0.8, 0.2], new Vector3(0.15, 0, 0.15), null, 0.3);
+		const planeXZ = new GizmoMesh('plane', 'xz', greenColor, new Vector3(0.15, 0, 0.15), null, 0.3);
 		this._translateControlMap.set('xz', [planeXZ]);
 		this.add(planeXZ);
 
-		const pickXZ = new GizmoMesh('plane', 'xz', [1.0, 1.0, 1.0], new Vector3(0.25, 0, 0.25), null, 0.5);
+		const pickXZ = new GizmoMesh('plane', 'xz', whiteColor, new Vector3(0.25, 0, 0.25), null, 0.5);
 		pickXZ.visible = false;
 		this.add(pickXZ);
 
-		const helperX = new GizmoMesh('axishelper', 'x', [1, 1, 0], new Vector3(-1e3, 0, 0), null);
+		const helperX = new GizmoMesh('axishelper', 'x', yellowColor, new Vector3(-1e3, 0, 0), null);
 		helperX.visible = false;
@@ -434,3 +445,3 @@ this._helperMap.set('x', helperX);
 
-		const helperY = new GizmoMesh('axishelper', 'y', [1, 1, 0], new Vector3(0, -1e3, 0), new Euler(0, 0, Math.PI / 2));
+		const helperY = new GizmoMesh('axishelper', 'y', yellowColor, new Vector3(0, -1e3, 0), new Euler(0, 0, Math.PI / 2));
 		helperY.visible = false;
@@ -440,3 +451,3 @@ this._helperMap.set('y', helperY);
 
-		const helperZ = new GizmoMesh('axishelper', 'z', [1, 1, 0], new Vector3(0, 0, -1e3), new Euler(0, -Math.PI / 2, 0));
+		const helperZ = new GizmoMesh('axishelper', 'z', yellowColor, new Vector3(0, 0, -1e3), new Euler(0, -Math.PI / 2, 0));
 		helperZ.visible = false;
@@ -639,4 +650,4 @@ this._helperMap.set('z', helperZ);
 	_createAxis() {
-		const lineX = new GizmoMesh('line', 'x', [1.0, 0.25, 0.25], new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2), 1.3);
-		const cubeX = new GizmoMesh('box', 'x', [1.0, 0.25, 0.25], new Vector3(1.3, 0, 0), new Euler(0, 0, 0), 0.2);
+		const lineX = new GizmoMesh('line', 'x', redColor, new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2), 1.3);
+		const cubeX = new GizmoMesh('box', 'x', redColor, new Vector3(1.3, 0, 0), new Euler(0, 0, 0), 0.2);
 		this._scaleControlMap.set('x', [lineX, cubeX]);
@@ -646,8 +657,8 @@ this.add(lineX);
 
-		const pickX = new GizmoMesh('pickAxis', 'x', [1.0, 1.0, 1.0], new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2));
+		const pickX = new GizmoMesh('pickAxis', 'x', whiteColor, new Vector3(0.75, 0, 0), new Euler(0, 0, -Math.PI / 2));
 		pickX.visible = false;
 		this.add(pickX);
 
-		const lineY = new GizmoMesh('line', 'y', [0.5, 0.8, 0.2], new Vector3(0, 0.75, 0), new Euler(0, 0, 0), 1.3);
-		const cubeY = new GizmoMesh('box', 'y', [0.5, 0.8, 0.2], new Vector3(0, 1.3, 0), new Euler(0, 0, 0), 0.2);
+		const lineY = new GizmoMesh('line', 'y', greenColor, new Vector3(0, 0.75, 0), new Euler(0, 0, 0), 1.3);
+		const cubeY = new GizmoMesh('box', 'y', greenColor, new Vector3(0, 1.3, 0), new Euler(0, 0, 0), 0.2);
 		this._scaleControlMap.set('y', [lineY, cubeY]);
@@ -657,8 +668,8 @@ this.add(lineY);
 
-		const pickY = new GizmoMesh('pickAxis', 'y', [1.0, 1.0, 1.0], new Vector3(0, 0.75, 0), new Euler(0, 0, 0));
+		const pickY = new GizmoMesh('pickAxis', 'y', whiteColor, new Vector3(0, 0.75, 0), new Euler(0, 0, 0));
 		pickY.visible = false;
 		this.add(pickY);
 
-		const lineZ = new GizmoMesh('line', 'z', [0.3, 0.5, 1.0], new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0), 1.3);
-		const cubeZ = new GizmoMesh('box', 'z', [0.3, 0.5, 1.0], new Vector3(0, 0, 1.3), new Euler(0, 0, 0), 0.2);
+		const lineZ = new GizmoMesh('line', 'z', blueColor, new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0), 1.3);
+		const cubeZ = new GizmoMesh('box', 'z', blueColor, new Vector3(0, 0, 1.3), new Euler(0, 0, 0), 0.2);
 		this._scaleControlMap.set('z', [lineZ, cubeZ]);
@@ -668,7 +679,7 @@ this.add(lineZ);
 
-		const pickZ = new GizmoMesh('pickAxis', 'z', [1.0, 1.0, 1.0], new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0));
+		const pickZ = new GizmoMesh('pickAxis', 'z', whiteColor, new Vector3(0, 0, 0.75), new Euler(Math.PI / 2, 0, 0));
 		pickZ.visible = false;
 		this.add(pickZ);
 
-		const cubeXYZ = new GizmoMesh('box', 'xyz', [0.75, 0.75, 0.75], new Vector3(0, 0, 0), new Euler(0, 0, 0), 0.32);
+		const cubeXYZ = new GizmoMesh('box', 'xyz', grayColor, new Vector3(0, 0, 0), new Euler(0, 0, 0), 0.32);
 		this._scaleControlMap.set('xyz', [cubeXYZ]);
@@ -874,13 +885,13 @@ this.add(cubeXYZ);
 	_createAxis() {
-		const axisE = new GizmoMesh('torus', 'e', [0.7, 0.7, 0.7], new Vector3(0, 0, 0), new Euler(0, 0, 0), this.rotateCircleRadiusE, Math.PI * 2);
+		const axisE = new GizmoMesh('torus', 'e', grayColor, new Vector3(0, 0, 0), new Euler(0, 0, 0), this.rotateCircleRadiusE, Math.PI * 2);
 		this._rotateControlMap.set('e', axisE);
 		this.add(axisE);
-		const pickE = new GizmoMesh('torus', 'e', [1.0, 1.0, 1.0], new Vector3(0, 0, 0), new Euler(0, 0, 0), this.rotateCircleRadiusE, Math.PI * 2, 0.2);
+		const pickE = new GizmoMesh('torus', 'e', whiteColor, new Vector3(0, 0, 0), new Euler(0, 0, 0), this.rotateCircleRadiusE, Math.PI * 2, 0.2);
 		pickE.visible = false;
 		this._pickHelper.set('e', pickE);
 		this.add(pickE);
-		const axisZ = new GizmoMesh('torus', 'z', [0.3, 0.5, 1.0], new Vector3(0, 0, 0), new Euler(0, 0, -Math.PI / 2), this.rotateCircleRadius);
+		const axisZ = new GizmoMesh('torus', 'z', blueColor, new Vector3(0, 0, 0), new Euler(0, 0, -Math.PI / 2), this.rotateCircleRadius);
 		this._rotateControlMap.set('z', axisZ);
 		this.add(axisZ);
-		const pickZ = new GizmoMesh('torus', 'z', [1.0, 1.0, 1.0], new Vector3(0, 0, 0), new Euler(0, 0, -Math.PI / 2), this.rotateCircleRadius, Math.PI, 0.2);
+		const pickZ = new GizmoMesh('torus', 'z', whiteColor, new Vector3(0, 0, 0), new Euler(0, 0, -Math.PI / 2), this.rotateCircleRadius, Math.PI, 0.2);
 		pickZ.visible = false;
@@ -890,6 +901,6 @@ this._pickHelper.set('z', pickZ);
 		this._axisZQuaternionStart = axisZ.quaternion.clone();
-		const axisY = new GizmoMesh('torus', 'y', [0.5, 0.8, 0.2], new Vector3(0, 0, 0), new Euler(Math.PI / 2, 0, 0), this.rotateCircleRadius);
+		const axisY = new GizmoMesh('torus', 'y', greenColor, new Vector3(0, 0, 0), new Euler(Math.PI / 2, 0, 0), this.rotateCircleRadius);
 		this._rotateControlMap.set('y', axisY);
 		this.add(axisY);
-		const pickY = new GizmoMesh('torus', 'y', [1.0, 1.0, 1.0], new Vector3(0, 0, 0), new Euler(Math.PI / 2, 0, 0), this.rotateCircleRadius, Math.PI, 0.2);
+		const pickY = new GizmoMesh('torus', 'y', whiteColor, new Vector3(0, 0, 0), new Euler(Math.PI / 2, 0, 0), this.rotateCircleRadius, Math.PI, 0.2);
 		pickY.visible = false;
@@ -899,6 +910,6 @@ this._pickHelper.set('y', pickY);
 		this._axisYQuaternionStart = axisY.quaternion.clone();
-		const axisX = new GizmoMesh('torus', 'x', [1.0, 0.25, 0.25], new Vector3(0, 0, 0), new Euler(0, Math.PI / 2, Math.PI / 2), this.rotateCircleRadius);
+		const axisX = new GizmoMesh('torus', 'x', redColor, new Vector3(0, 0, 0), new Euler(0, Math.PI / 2, Math.PI / 2), this.rotateCircleRadius);
 		this._rotateControlMap.set('x', axisX);
 		this.add(axisX);
-		const pickX = new GizmoMesh('torus', 'x', [1.0, 1.0, 1.0], new Vector3(0, 0, 0), new Euler(0, Math.PI / 2, Math.PI / 2), this.rotateCircleRadius, Math.PI, 0.2);
+		const pickX = new GizmoMesh('torus', 'x', whiteColor, new Vector3(0, 0, 0), new Euler(0, Math.PI / 2, Math.PI / 2), this.rotateCircleRadius, Math.PI, 0.2);
 		pickX.visible = false;
@@ -908,13 +919,13 @@ this._pickHelper.set('x', pickX);
 		this._axisXQuaternionStart = axisX.quaternion.clone();
-		const center = new GizmoMesh('sphere', 'xyz', [1.0, 1.0, 1.0], new Vector3(0, 0, 0), new Euler(0, 0, 0), this.rotateCircleRadius);
+		const center = new GizmoMesh('sphere', 'xyz', whiteColor, new Vector3(0, 0, 0), new Euler(0, 0, 0), this.rotateCircleRadius);
 		this._rotateControlMap.set('xyz', center);
 		this.add(center);
 
-		this._lineHelperS = new GizmoMesh('linehelper', 'helperS', [1.0, 0.95, 0.0]);
+		this._lineHelperS = new GizmoMesh('linehelper', 'helperS', yellowColor);
 		this._lineHelperS.visible = false;
 		this.add(this._lineHelperS);
-		this._lineHelperE = new GizmoMesh('linehelper', 'helperE', [1.0, 0.95, 0.0]);
+		this._lineHelperE = new GizmoMesh('linehelper', 'helperE', yellowColor);
 		this._lineHelperE.visible = false;
 		this.add(this._lineHelperE);
-		this._rotateHelper = new GizmoMesh('rotatehelper', 'rotatehelper', [1.0, 0.95, 0.0]);
+		this._rotateHelper = new GizmoMesh('rotatehelper', 'rotatehelper', yellowColor);
 		this._rotateHelper.visible = false;
@@ -1201,3 +1212,3 @@ this.add(this._rotateHelper);
 	constructor(type, name, color, position, rotation, size, arc, tube) {
-		const material = new BasicMaterial();
+		const material = new GizmoMaterial();
 		let geometry;
@@ -1244,5 +1255,2 @@
 
-		material.transparent = true;
-		material.depthTest = false;
-		material.side = DRAW_SIDE.DOUBLE;
 		material.diffuse.fromArray(color);
@@ -1255,3 +1263,3 @@ material._color = material.diffuse.clone();
 		this.castShadows = false;
-		this.renderOrder = 100;
+		this.renderOrder = gizmoRenderOrder;
 
@@ -1280,3 +1288,3 @@ if (type === 'axishelper') {
 	yellow() {
-		this.material.diffuse.fromArray([1.0, 0.95, 0.0]);
+		this.material.diffuse.fromArray(yellowColor);
 	}
@@ -1286,2 +1294,23 @@
 
+const gizmoFragmentShader = ShaderLib.basic_frag.replace('#include <encodings_frag>', '');
+
+class GizmoMaterial extends BasicMaterial {
+
+	constructor() {
+		super();
+
+		this.type = MATERIAL_TYPE.SHADER;
+
+		this.shaderName = 'gizmo';
+
+		this.vertexShader = ShaderLib.basic_vert;
+		this.fragmentShader = gizmoFragmentShader;
+
+		this.transparent = true;
+		this.depthTest = false;
+		this.side = DRAW_SIDE.DOUBLE;
+	}
+
+}
+
 class RotateTorusGeometry extends Geometry {
@@ -1288,0 +1317,0 @@

examples/jsm/geometries/builders/ExtrudeShapeBuilder.js

@@ -0,1 +1,2 @@
+import { Vector3 } from 't3d';
 import { Earcut } from './Earcut.js';
@@ -14,6 +15,13 @@ import { GeometryBuilderUtils } from './GeometryBuilderUtils.js';
 	 * @param {Array} [shape.depth=1] - The depth of this shape. If it is a negative number, extrude in the positive direction of the z-axis, otherwise, extrude in the negative direction of the z-axis,
+	 * @param {Object} [shape.pathFrames] - The path frames data. If it is not undefined, the shape will be extruded along the path.
      */
 	getGeometryData: function(shape) {
 		const depth = (shape.depth !== undefined) ? shape.depth : 1;
-		const negativeDepth = depth < 0;
+		const pathFrames = shape.pathFrames;
+
+		let negativeDepth = false;
+		if (!pathFrames) {
+			negativeDepth = depth < 0;
+		}
+
 		const vertices = []; // flat array of vertices like [ x0,y0, x1,y1, x2,y2, ... ]
@@ -37,3 +45,8 @@ const holeIndices = []; // array of hole indices
 		for (let i = 0, l = vertices.length; i < l; i += 2) {
-			positions.push(vertices[i], vertices[i + 1], 0); // x-y plane
+			if (pathFrames) {
+				setPositionByPathFrames(pathFrames, 0, vertices[i], vertices[i + 1], positions);
+			} else {
+				positions.push(vertices[i], vertices[i + 1], 0); // x-y plane
+			}
+
 			uvs.push(negativeDepth ? -vertices[i] : vertices[i], vertices[i + 1]); // world uvs
@@ -55,3 +68,8 @@ }
 		for (let i = 0, l = vertices.length; i < l; i += 2) {
-			positions.push(vertices[i], vertices[i + 1], -depth); // x-y plane
+			if (pathFrames) {
+				setPositionByPathFrames(pathFrames, pathFrames.points.length - 1, vertices[i], vertices[i + 1], positions);
+			} else {
+				positions.push(vertices[i], vertices[i + 1], -depth); // x-y plane
+			}
+
 			uvs.push(negativeDepth ? vertices[i] : -vertices[i], vertices[i + 1]); // world uvs
@@ -84,6 +102,10 @@ }
 
+		const steps = pathFrames ? pathFrames.points.length - 1 : 1;
+
 		for (let i = 0; i < loop.length; i++) {
 			let dist = 0;
+
 			const sideStart = loop[i][0];
 			const sideFinish = loop[i][1];
+
 			for (let j = sideStart; j < sideFinish; j += 2) {
@@ -93,24 +115,36 @@ const _index1 = j;
 
-				positions.push(vertices[_index1 + 0], vertices[_index1 + 1], 0);
-				positions.push(vertices[_index1 + 0], vertices[_index1 + 1], -depth);
+				const _dist1 = dist;
+				const _dist2 = dist - getLength(vertices[_index1 + 0], vertices[_index1 + 1], vertices[_index2 + 0], vertices[_index2 + 1]);
 
-				uvs.push(dist, 0);
-				uvs.push(dist, -depth);
+				dist = _dist2;
 
-				positions.push(vertices[_index2 + 0], vertices[_index2 + 1], 0);
-				positions.push(vertices[_index2 + 0], vertices[_index2 + 1], -depth);
-				dist -= getLength(vertices[_index1 + 0], vertices[_index1 + 1], vertices[_index2 + 0], vertices[_index2 + 1]);
+				for (let s = 0; s <= steps; s++) {
+					if (pathFrames) {
+						setPositionByPathFrames(pathFrames, s, vertices[_index1 + 0], vertices[_index1 + 1], positions);
+						setPositionByPathFrames(pathFrames, s, vertices[_index2 + 0], vertices[_index2 + 1], positions);
 
-				uvs.push(dist, 0);
-				uvs.push(dist, -depth);
+						uvs.push(_dist1, -pathFrames.lengths[s]);
+						uvs.push(_dist2, -pathFrames.lengths[s]);
+					} else {
+						const _depth = -depth / steps * s;
 
-				if (negativeDepth) {
-					indices.push(vertexCount + 0, vertexCount + 1, vertexCount + 2);
-					indices.push(vertexCount + 1, vertexCount + 3, vertexCount + 2);
-				} else {
-					indices.push(vertexCount + 0, vertexCount + 2, vertexCount + 1);
-					indices.push(vertexCount + 1, vertexCount + 2, vertexCount + 3);
+						positions.push(vertices[_index1 + 0], vertices[_index1 + 1], _depth);
+						positions.push(vertices[_index2 + 0], vertices[_index2 + 1], _depth);
+
+						uvs.push(_dist1, _depth);
+						uvs.push(_dist2, _depth);
+					}
+
+					if (s > 0) {
+						if (negativeDepth) {
+							indices.push(vertexCount - 2, vertexCount + 0, vertexCount - 1);
+							indices.push(vertexCount - 1, vertexCount + 0, vertexCount + 1);
+						} else {
+							indices.push(vertexCount - 2, vertexCount - 1, vertexCount + 0);
+							indices.push(vertexCount - 1, vertexCount + 1, vertexCount + 0);
+						}
+					}
+
+					vertexCount += 2;
 				}
-
-				vertexCount += 4;
 			}
@@ -136,2 +170,13 @@ }
 
+const normal = new Vector3();
+const binormal = new Vector3();
+const position = new Vector3();
+
+function setPositionByPathFrames(frames, index, x, y, positions) {
+	normal.copy(frames.normals[index]).multiplyScalar(y);
+	binormal.copy(frames.binormals[index]).multiplyScalar(x);
+	position.copy(frames.points[index]).add(normal).add(binormal);
+	positions.push(position.x, position.y, position.z);
+}
+
 export { ExtrudeShapeBuilder };

examples/jsm/shaders/InfiniteGridShader.js

@@ -39,5 +39,5 @@ const InfiniteGridShader = {
 
-            nearPoint = UnprojectPoint(a_Position.x, a_Position.y, -1.0, viewInvMat, projInvMat);// unprojecting on the near plane
-            farPoint = UnprojectPoint(a_Position.x, a_Position.y, 1.0, viewInvMat, projInvMat);// unprojecting on the far plane
-            gl_Position = vec4(a_Position, 1.0);
+            nearPoint = UnprojectPoint(a_Position.x, a_Position.y, -1.0, viewInvMat, projInvMat); // unprojecting on the near plane
+            farPoint = UnprojectPoint(a_Position.x, a_Position.y, 1.0, viewInvMat, projInvMat); // unprojecting on the far plane
+            gl_Position = vec4(a_Position, 1.0); // using directly the clipped coordinates
         }
@@ -64,17 +64,25 @@ `,
         vec4 grid(vec3 fragPos3D, float scale, float alpha) {
-            vec2 coord = mix(fragPos3D.xz, fragPos3D.xy, flipProgress); // use the scale variable to set the distance between the lines
-            vec2 derivative = fwidth(coord / scale) * 1.0;
-            vec2 grid = abs(fract(coord / scale - 0.5) - 0.5) / derivative;
+            vec2 coord = mix(fragPos3D.xz, fragPos3D.xy, flipProgress) / scale; // use the scale variable to set the distance between the lines
+            vec2 derivative = fwidth(coord);
+            vec2 grid = abs(fract(coord - 0.5) - 0.5) / derivative;
             float line = min(grid.x, grid.y);
-            float minimumz = min(fwidth(coord).y, 1.0);
-            float minimumx = min(fwidth(coord).x, 1.0);
+            float minimumz = min(derivative.y, 1.0);
+            float minimumx = min(derivative.x, 1.0);
             vec4 color = vec4(gridIntensity, gridIntensity, gridIntensity, 1.0 - min(line, 1.0));
+
             // z axis
-            if(fragPos3D.x >= -axisIntensity * minimumx && fragPos3D.x <= axisIntensity * minimumx)
-                color = vec4(0.0, 0.0, 1.0, 1.0);
+            if(fragPos3D.x >= -axisIntensity * minimumx && fragPos3D.x <= axisIntensity * minimumx) {
+                color *= vec4(0.0, 0.0, 4.0, 1.0);
+                color.b = clamp(color.b, 0.0, 1.0);
+            }
+                
             // x axis and y axis
             float xy = mix(fragPos3D.z, fragPos3D.y, flipProgress);
-            if(xy >= -axisIntensity * minimumz && xy <= axisIntensity * minimumz)
-                color = vec4(1.0, 0.0, 0.0, 1.0);
+            if(xy >= -axisIntensity * minimumz && xy <= axisIntensity * minimumz) {
+                color *= vec4(4.0, 0.0, 0.0, 1.0);
+                color.r = clamp(color.r, 0.0, 1.0);
+            }
+                
             color.a *= alpha;
+
             return color;
@@ -101,2 +109,3 @@ }
             vec3 fragPos3D = nearPoint + t * (farPoint - nearPoint);
+            
             gl_FragDepthEXT = computeDepth(fragPos3D);
@@ -103,0 +112,0 @@

package.json

 {
   "name": "t3d",
-  "version": "0.2.3",
-  "description": "t3d.js is a web-first, light weight, extendable 3D rendering library.",
+  "version": "0.2.4",
+  "description": "t3d.js is a lightweight, web-first, and extendable 3D rendering library.",
   "type": "module",
@@ -6,0 +6,0 @@ "main": "./build/t3d.js",

src/render/ThinRenderer.js

@@ -172,2 +172,3 @@ let _rendererId = 0;
 	 * @param {TypedArray} buffer Uint8Array is the only destination type supported in all cases, other types are renderTarget and platform dependent.
+	 * @return {Promise<TypedArray>} A promise that resolves with the passed in buffer after it has been filled with the pixel data.
 	 */
@@ -174,0 +175,0 @@ readRenderTargetPixels(x, y, width, height, buffer) {}

src/webgl/WebGLAttribute.js

@@ -29,11 +29,13 @@ class WebGLAttribute {
 		case gl.FLOAT:
-		case gl.BYTE:
-		case gl.UNSIGNED_BYTE:
-		case gl.UNSIGNED_SHORT:
+		case gl.INT:
+		case gl.UNSIGNED_INT:
 			return 1;
 		case gl.FLOAT_VEC2:
+		case gl.INT_VEC2:
 			return 2;
 		case gl.FLOAT_VEC3:
+		case gl.INT_VEC3:
 			return 3;
 		case gl.FLOAT_VEC4:
+		case gl.INT_VEC4:
 			return 4;
@@ -61,8 +63,9 @@ case gl.FLOAT_MAT2:
 			return gl.FLOAT;
-		case gl.UNSIGNED_BYTE:
-			return gl.UNSIGNED_BYTE;
-		case gl.UNSIGNED_SHORT:
-			return gl.UNSIGNED_SHORT;
-		case gl.BYTE:
-			return gl.BYTE;
+		case gl.INT:
+		case gl.INT_VEC2:
+		case gl.INT_VEC3:
+		case gl.INT_VEC4:
+			return gl.INT;
+		case gl.UNSIGNED_INT:
+			return gl.UNSIGNED_INT;
 		default:
@@ -69,0 +72,0 @@ return gl.FLOAT;

src/webgl/WebGLPrograms.js

@@ -245,2 +245,4 @@ import { WebGLProgram } from './WebGLProgram.js';
 		'precision ' + props.precision + ' sampler2D;',
+		(props.version >= 2) ? 'precision ' + props.precision + ' isampler2D;' : '',
+		(props.version >= 2) ? 'precision ' + props.precision + ' usampler2D;' : '',
 
@@ -304,2 +306,4 @@ '#define SHADER_NAME ' + props.shaderName,
 		'precision ' + props.precision + ' sampler2D;',
+		(props.version >= 2) ? 'precision ' + props.precision + ' isampler2D;' : '',
+		(props.version >= 2) ? 'precision ' + props.precision + ' usampler2D;' : '',
 		(props.version >= 2) ? 'precision ' + props.precision + ' sampler2DShadow;' : '',
@@ -306,0 +310,0 @@ (props.version >= 2) ? 'precision ' + props.precision + ' samplerCubeShadow;' : '',

src/webgl/WebGLRenderer.js

@@ -162,2 +162,3 @@ import { WebGLPrograms } from './WebGLPrograms.js';
 		this._renderTargets.readRenderTargetPixels(x, y, width, height, buffer);
+		return Promise.resolve(buffer);
 	}
@@ -164,0 +165,0 @@

src/webgl/WebGLUniforms.js

@@ -146,2 +146,4 @@ import { PIXEL_TYPE, PIXEL_FORMAT, TEXTURE_FILTER, COMPARE_FUNC } from '../const.js';
 		case gl.SAMPLER_2D_SHADOW:
+		case gl.INT_SAMPLER_2D:
+		case gl.UNSIGNED_INT_SAMPLER_2D:
 			uniform.setValue = function(value, textures) {
@@ -148,0 +150,0 @@ const unit = textures.allocTexUnit();

src/webgl/WebGLVertexArrayBindings.js

@@ -149,6 +149,5 @@ import { PropertyMap } from '../render/PropertyMap.js';
 				const type = bufferProperties.type;
-				if (programAttribute.format !== type) {
-					// console.warn("WebGLVertexArrayBindings: attribute " + key + " type not match! " + programAttribute.format + " : " + type);
-				}
 
+				const integer = isWebGL2 && (programAttribute.format === gl.INT || programAttribute.format === gl.UNSIGNED_INT);
+
 				for (let i = 0, l = programAttribute.locationSize; i < l; i++) {
@@ -179,6 +178,6 @@ gl.enableVertexAttribArray(programAttribute.location + i);
 				if (programAttribute.count === stride && programAttribute.locationSize === 1) {
-					gl.vertexAttribPointer(programAttribute.location, programAttribute.count, type, normalized, 0, 0);
+					this._vertexAttribPointer(programAttribute.location, programAttribute.count, type, normalized, 0, 0, integer);
 				} else {
 					for (let i = 0; i < programAttribute.locationSize; i++) {
-						gl.vertexAttribPointer(
+						this._vertexAttribPointer(
 							programAttribute.location + i,
@@ -189,3 +188,4 @@ programAttribute.count / programAttribute.locationSize,
 							bytesPerElement * stride,
-							bytesPerElement * (offset + (programAttribute.count / programAttribute.locationSize) * i)
+							bytesPerElement * (offset + (programAttribute.count / programAttribute.locationSize) * i),
+							integer
 						);
@@ -206,2 +206,11 @@ }
 
+	_vertexAttribPointer(index, size, type, normalized, stride, offset, integer) {
+		const gl = this._gl;
+		if (integer) {
+			gl.vertexAttribIPointer(index, size, type, stride, offset);
+		} else {
+			gl.vertexAttribPointer(index, size, type, normalized, stride, offset);
+		}
+	}
+
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2992981

increased by0.47%

Number of package files

373

increased by0.27%

Lines of code

72683

increased by0.46%

No dependency changes