Removed native array 2

.gitignore

@@ -15,6 +15,7 @@
 *.ipr
 *.iws
 .idea/
+.renderers/
 
 .metadata
 analysis_options.yaml

README.md

@@ -57,6 +57,7 @@ This is a dart conversion of three.js and three_dart, originally created by [@mr
  - WebGL2 supported. please add `<script src="https://cdn.jsdelivr.net/gh/Knightro63/flutter_angle/assets/gles_bindings.js"></script>` to your index.html to load the js_interop file.
 
 **Linux**
+ - Currenlty only works for flutter < 3.27
  - Ubuntu supported (Tested on Linux Mint)
  - OpenGL supported
 
@@ -69,6 +70,12 @@ Please use [Permission Handler](https://pub.dev/packages/permission_handler) pac
 
 This project is a simple 3D rendering engine for flutter to view, edit, or manipulate 3D models.
 
+## Legacy
+
+Please use [three_js_webgl](https://pub.dev/packages/three_js_webgl) for three_dart type renderer. 
+
+As this project moves twards impeller renderer google's ANGLE will be removed and this version will be moved to three_js_angle, which currenly does not exists.
+
 ## Example
 
 Find the example for this API [here](https://github.com/Knightro63/three_js/tree/main/packages/three_js/example/), for more examples you can click [here](https://github.com/Knightro63/three_js/tree/main/examples/), and for a preview go [here](https://knightro63.github.io/three_js/).

examples/lib/camera/webgl_camera.dart

@@ -44,7 +44,7 @@ class _MyAppState extends State<WebglCamera> {
   void dispose() {
     timer.cancel();
     threeJs.dispose();
-    threeJs.renderer!.setScissor( 0, 0, threeJs.width , threeJs.height);
+    threeJs.renderer?.setScissor( 0, 0, threeJs.width , threeJs.height);
     super.dispose();
 
     cameraPerspective.dispose();

examples/lib/clipping/webgl_clipping_stencil.dart

@@ -170,7 +170,7 @@ class _State extends State<WebglClippingStencil> {
 
       final po = three.Mesh(planeGeom, planeMat);
       po.onAfterRender = ({
-        three.WebGLRenderer? renderer,
+        three.Renderer? renderer,
         three.RenderTarget? renderTarget,
         three.Object3D? mesh,
         three.Scene? scene,

examples/lib/geometry/webgl_geometry_spline_editor.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:example/src/gui.dart';
 import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
@@ -167,7 +168,7 @@ class _State extends State<WebglGeometrySplineEditor> {
     }
 
     final geometry = three.BufferGeometry();
-    geometry.setAttributeFromString( 'position', three.Float32BufferAttribute( three.Float32Array( ARC_SEGMENTS * 3 ), 3 ) );
+    geometry.setAttributeFromString( 'position', three.Float32BufferAttribute( Float32List( ARC_SEGMENTS * 3 ), 3 ) );
 
     three.CatmullRomCurve3 curve = three.CatmullRomCurve3( points:positions );
     three.Line mesh;

examples/lib/geometry/webgl_interactive_raycasting_points.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
 import 'package:three_js/three_js.dart' as three;
@@ -110,8 +111,8 @@ class _State extends State<WebglInteractiveRaycastingPoints> {
     final geometry = three.BufferGeometry();
     final numPoints = (width * length).toInt();
 
-    final positions = three.Float32Array( numPoints * 3 );
-    final colors = three.Float32Array( numPoints * 3 );
+    final positions = Float32List( numPoints * 3 );
+    final colors = Float32List( numPoints * 3 );
 
     int k = 0;
 
@@ -153,7 +154,7 @@ class _State extends State<WebglInteractiveRaycastingPoints> {
   three.Points generateIndexedPointcloud(three.Color color, int width, int length ) {
     final geometry = generatePointCloudGeometry( color, width, length );
     final numPoints = (width * length).toInt();
-    final indices = three.Uint16Array( numPoints );
+    final indices = Uint16List( numPoints );
 
     int k = 0;
 
@@ -172,7 +173,7 @@ class _State extends State<WebglInteractiveRaycastingPoints> {
   three.Points generateIndexedWithOffsetPointcloud(three.Color color, int width, int length ) {
     final geometry = generatePointCloudGeometry( color, width, length );
     final numPoints = (width * length).toInt();
-    final indices = three.Uint16Array( numPoints );
+    final indices = Uint16List( numPoints );
 
     int k = 0;
 

examples/lib/lights/webgl_lightprobe_cube_camera.dart

@@ -60,7 +60,7 @@ class _State extends State<WebglLightprobeCubeCamera> {
     threeJs.camera = three.PerspectiveCamera( 40, threeJs.width / threeJs.height, 1, 1000 );
     threeJs.camera.position.setValues( 0, 0, 30 );
 
-    final cubeRenderTarget = three.WebGLCubeRenderTarget( 256 );
+    final cubeRenderTarget = three.CubeRenderTarget( 256 );
     final cubeCamera = three.CubeCamera( 1, 1000, cubeRenderTarget );
 
     // controls

examples/lib/line/webgl_lines_fat.dart

@@ -1,4 +1,5 @@
 import 'dart:async';
+import 'dart:typed_data';
 import 'package:example/src/geometry_utils.dart';
 import 'package:example/src/gui.dart';
 import 'package:flutter/material.dart';
@@ -106,8 +107,8 @@ class _State extends State<WebglLinesFat> {
     // Line2 ( LineGeometry, LineMaterial )
 
     final geometry = LineGeometry();
-    geometry.setPositions(three.Float32Array.fromList(positions));
-    geometry.setColors(three.Float32Array.fromList(colors));
+    geometry.setPositions(Float32List.fromList(positions));
+    geometry.setColors(Float32List.fromList(colors));
 
     matLine = LineMaterial.fromMap( {
       'color': 0xffffff,

examples/lib/line/webgl_lines_fat_raycasting.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:example/src/gui.dart';
 import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
@@ -147,12 +148,12 @@ class _State extends State<WebglLinesFatRaycasting> {
     }
 
     final lineGeometry = LineGeometry();
-    lineGeometry.setPositions(three.Float32Array.fromList(positions));
-    lineGeometry.setColors(three.Float32Array.fromList(colors));
+    lineGeometry.setPositions(Float32List.fromList(positions));
+    lineGeometry.setColors(Float32List.fromList(colors));
 
     final segmentsGeometry = LineSegmentsGeometry();
-    segmentsGeometry.setPositions(three.Float32Array.fromList(positions));
-    segmentsGeometry.setColors(three.Float32Array.fromList(colors));
+    segmentsGeometry.setPositions(Float32List.fromList(positions));
+    segmentsGeometry.setColors(Float32List.fromList(colors));
 
     segments = LineSegments2( segmentsGeometry, matLine );
     segments.computeLineDistances();

examples/lib/loaders/webgl_loader_glb.dart

@@ -84,6 +84,7 @@ class _MyAppState extends State<WebglLoaderGlb> {
     three.GLTFData? result = await loader.fromAsset( 'dash.glb' );
 
     final object = result!.scene;
+    object.frustumCulled = false;
     threeJs.scene.add(object);
     mixer = three.AnimationMixer(object);
     mixer.clipAction(result.animations![4], null, null)!.play();

examples/lib/loaders/webgl_loader_svg.dart

@@ -133,8 +133,9 @@ class _MyAppState extends State<WebglLoaderSvg> {
         final strokeColor = path.userData?["style"]["stroke"];
 
         if (guiData["drawStrokes"] == true &&
-            strokeColor != null &&
-            strokeColor != 'none') {
+          strokeColor != null &&
+          strokeColor != 'none'
+        ) {
           three.MeshBasicMaterial material = three.MeshBasicMaterial.fromMap({
             "color": three.Color().setStyle(strokeColor).convertSRGBToLinear(),
             "opacity": path.userData?["style"]["strokeOpacity"],
@@ -146,8 +147,7 @@ class _MyAppState extends State<WebglLoaderSvg> {
 
           for (int j = 0, jl = path.subPaths.length; j < jl; j++) {
             three.Path subPath = path.subPaths[j];
-            final geometry = SVGLoader.pointsToStroke(
-                subPath.getPoints(), path.userData?["style"]);
+            final geometry = SVGLoader.pointsToStroke(subPath.getPoints(), path.userData?["style"]);
 
             if (geometry != null) {
               final mesh = three.Mesh(geometry, material);

examples/lib/material/webgl_materials.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:example/src/statistics.dart';
 import 'package:flutter/material.dart';
 import 'package:three_js/three_js.dart' as three;
@@ -144,7 +145,7 @@ class _MyAppState extends State<WebglMaterials> {
   }
 
   three.ImageElement generateTexture() {
-    final pixels = three.Uint8Array(256 * 256 * 4);
+    final pixels = Uint8List(256 * 256 * 4);
 
     int x = 0, y = 0, l = pixels.length;
 

examples/lib/material/webgl_materials_physical_transmission.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:example/src/gui.dart';
 import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
@@ -208,7 +209,7 @@ class _State extends State<WebglMaterialsPhysicalTransmission> {
     return three.ImageElement(
       width: 2,
       height: 2,
-      data: three.Uint8Array.fromList([0,0,0,0,0,0,0,0,255,255,255,255,255,255,255,255])
+      data: Uint8List.fromList([0,0,0,0,0,0,0,0,255,255,255,255,255,255,255,255])
     );
   }
 }

examples/lib/material/webgl_materials_video.dart

@@ -4,8 +4,6 @@ import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
 import 'package:three_js/three_js.dart' as three;
 import 'package:three_js_postprocessing/post/effect_composer.dart';
-// import 'package:three_js_postprocessing/post/bloom_pass.dart';
-// import 'package:three_js_postprocessing/post/outpass.dart';
 import 'package:three_js_postprocessing/post/render_pass.dart';
 import 'package:three_js_video_texture/three_js_video_texture.dart';
 

examples/lib/mirror/webgl_portal.dart

@@ -97,14 +97,14 @@ class _State extends State<WebglPortal> {
     final topLeftCorner = three.Vector3();
     final reflectedPosition = three.Vector3();
 
-    final leftPortalTexture = three.WebGLRenderTarget( 256, 256 );
+    final leftPortalTexture = three.RenderTarget( 256, 256 );
     final leftPortal = three.Mesh( planeGeo, three.MeshBasicMaterial.fromMap( { 'map': leftPortalTexture.texture } ) );
     leftPortal.position.x = - 30;
     leftPortal.position.y = 20;
     leftPortal.scale.setValues( 0.35, 0.35, 0.35 );
     threeJs.scene.add( leftPortal );
 
-    final rightPortalTexture = three.WebGLRenderTarget( 256, 256 );
+    final rightPortalTexture = three.RenderTarget( 256, 256 );
     final rightPortal = three.Mesh( planeGeo, three.MeshBasicMaterial.fromMap( { 'map': rightPortalTexture.texture } ) );
     rightPortal.position.x = 30;
     rightPortal.position.y = 20;
@@ -162,7 +162,7 @@ class _State extends State<WebglPortal> {
     blueLight.position.setValues( 0, 50, 550 );
     threeJs.scene.add( blueLight );
 
-    void renderPortal(three.Mesh thisPortalMesh,three.Mesh otherPortalMesh,three.WebGLRenderTarget thisPortalTexture ) {
+    void renderPortal(three.Mesh thisPortalMesh,three.Mesh otherPortalMesh,three.RenderTarget thisPortalTexture ) {
       thisPortalMesh.worldToLocal( reflectedPosition.setFrom( threeJs.camera.position ) );
       reflectedPosition.x *= - 1.0; reflectedPosition.z *= - 1.0;
       otherPortalMesh.localToWorld( reflectedPosition );

examples/lib/modifers/webgl_modifer_tessellation.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
 import 'package:three_js/three_js.dart' as three;
@@ -80,8 +81,8 @@ class _State extends State<WebglModifierTessellation> {
     final geometry = tessellateModifier.modify( textG );
 
     final numFaces = geometry.attributes['position'].count ~/ 3;
-    final colors = three.Float32Array( numFaces * 3 * 3 );
-    final displacement = three.Float32Array( numFaces * 3 * 3 );
+    final colors = Float32List( numFaces * 3 * 3 );
+    final displacement = Float32List( numFaces * 3 * 3 );
     final color = three.Color();
 
     for (int f = 0; f < numFaces; f ++ ) {

examples/lib/multi_views/multi_views.dart

@@ -1,6 +1,7 @@
 import 'dart:async';
 import 'package:flutter/material.dart' hide Matrix4;
 import 'package:three_js/three_js.dart' as three;
+import 'package:flutter_angle/flutter_angle.dart';
 
 class MultiViews extends StatefulWidget {
   const MultiViews({super.key});
@@ -9,7 +10,7 @@ class MultiViews extends StatefulWidget {
 }
 
 class _MyAppState extends State<MultiViews> {
-  List<three.FlutterAngleTexture> textures = [];
+  List<FlutterAngleTexture> textures = [];
   ScrollController controller = ScrollController();
 
   @override

examples/lib/multi_views/webgl2_multiple_rendertargets.dart

@@ -169,10 +169,10 @@ class _State extends State<Webgl2MultipleRendertargets> {
   Future<void> setup() async {
     // Create a multi render target with Float buffers
 
-    final renderTarget = three.WebGLRenderTarget(
+    final renderTarget = three.RenderTarget(
       (threeJs.width * threeJs.dpr).toInt(),
       (threeJs.height * threeJs.dpr).toInt(),
-      three.WebGLRenderTargetOptions({
+      three.RenderTargetOptions({
         'count': 2,
         'minFilter': three.NearestFilter,
         'magFilter': three.NearestFilter

examples/lib/multi_views/webgl_multi_views.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:example/src/statistics.dart';
 import 'package:flutter/material.dart';
 import 'package:three_js/three_js.dart' as three;
@@ -156,7 +157,7 @@ class _MyAppState extends State<WebglMultiViews> {
     final geometry1 = IcosahedronGeometry( radius, 1 );
 
     final count = geometry1.attributes['position'].count;
-    geometry1.setAttributeFromString( 'color', three.Float32BufferAttribute( three.Float32Array( count * 3 ), 3 ) );
+    geometry1.setAttributeFromString( 'color', three.Float32BufferAttribute( Float32List( count * 3 ), 3 ) );
 
     final geometry2 = geometry1.clone();
     final geometry3 = geometry1.clone();

examples/lib/others/webgl_buffergeometry_instancing_billboards.dart

@@ -68,7 +68,7 @@ class _State extends State<WebglBuffergeometryInstancingBillboards> {
 
     const particleCount = 75000;
 
-    final translateArray = three.Float32Array( particleCount * 3 );
+    final translateArray = Float32List( particleCount * 3 );
 
     for ( int i = 0, i3 = 0, l = particleCount; i < l; i ++, i3 += 3 ) {
       translateArray[ i3 + 0 ] = math.Random().nextDouble() * 2 - 1;

examples/lib/others/webgl_custom_attributes_lines.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'dart:typed_data';
 import 'package:example/src/statistics.dart';
 import 'package:flutter/material.dart';
 import 'package:three_js/three_js.dart' as three;
@@ -120,17 +121,17 @@ class _State extends State<WebglCustomAttributesLines> {
     geometry.center();
 
     final count = geometry.attributes['position'].count;
-    final displacement = three.Float32BufferAttribute(three.Float32Array( count * 3), 3 );
+    final displacement = three.Float32BufferAttribute(Float32List( count * 3), 3 );
     geometry.setAttributeFromString( 'displacement', displacement );
 
-    final customColor = three.Float32BufferAttribute(three.Float32Array( count * 3), 3 );
+    final customColor = three.Float32BufferAttribute(Float32List( count * 3), 3 );
     geometry.setAttributeFromString( 'customColor', customColor );
 
     final color = three.Color( 0xffffff );
 
     for (int i = 0, l = customColor.count; i < l; i ++ ) {
       color.setHSL( i / l, 0.5, 0.5 );
-      color.copyIntoArray( customColor.array, i * customColor.itemSize );
+      color.copyIntoList( customColor.array, i * customColor.itemSize );
     }
 
     final line = three.Line( geometry, shaderMaterial );

examples/lib/postprocessing/webgl_postprocessing_fxaa.dart

@@ -4,6 +4,7 @@ import 'package:example/src/statistics.dart';
 import 'package:three_js/three_js.dart' as three;
 import 'dart:math' as math;
 import 'package:three_js_postprocessing/three_js_postprocessing.dart';
+import 'package:flutter_angle/flutter_angle.dart';
 
 class WebglPostprocessingFXAA extends StatefulWidget {
   const WebglPostprocessingFXAA({super.key});
@@ -119,7 +120,7 @@ class _State extends State<WebglPostprocessingFXAA> {
     threeJs.customRenderer = renderer;
   }
 
-  Future<void> renderer(three.Scene scene, three.Camera camera, three.FlutterAngleTexture texture,[dt]) async{
+  Future<void> renderer(three.Scene scene, three.Camera camera, FlutterAngleTexture texture,[dt]) async{
     final halfWidth = threeJs.width / 2;
 
     controls.update();

examples/lib/projected/webgl_projected_basic.dart

@@ -1,5 +1,6 @@
 import 'dart:async';
 import 'dart:math' as math;
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:example/src/statistics.dart';
 import 'package:three_js/three_js.dart' as three;
@@ -64,7 +65,7 @@ class _State extends State<WebglProjectedBasic> {
     threeJs.camera.lookAt(three.Vector3(0, 0, 0));
 
     // load the example texture
-    final texture = await three.TextureLoader().fromAsset('assets/textures/uv_grid_directx.jpg');
+    final texture = await three.TextureLoader(flipY: !kIsWeb).fromAsset('assets/textures/uv_grid_directx.jpg');
     final camera = three.PerspectiveCamera(45, 1, 0.01, 3);
     camera.position.setValues(-1, 1.2, 2);
     camera.lookAt(three.Vector3(0, 0, 0));
@@ -82,6 +83,7 @@ class _State extends State<WebglProjectedBasic> {
     );
     final box = three.Mesh(geometry, material);
     threeJs.scene.add(box);
+    material.needsUpdate = true;
 
     // move the mesh any way you want!
     box.rotation.y = -math.pi / 4;
@@ -93,6 +95,11 @@ class _State extends State<WebglProjectedBasic> {
     final ambientLight = three.AmbientLight(0xffffff, 0.8);
     threeJs.scene.add(ambientLight);
 
+    final dirLight = three.DirectionalLight( 0xFFFFFF, 3 );
+    dirLight.position.setValues( - 0.5, 1, 0.8 );
+    dirLight.castShadow = true;
+    threeJs.scene.add( dirLight );
+
     controls = three.OrbitControls(threeJs.camera, threeJs.globalKey);
   }
 }