Breaking on exception: type 'Buffer' is not a subtype of type 'Buffer' of 'buffer'.

[ghost]

tried to port another example, with little success..

Am I doing something wrong here?

import 'dart:html';
import 'dart:math' as Math;
import 'package:vector_math/vector_math.dart';
import 'package:three/three.dart';
import 'package:three/extras/image_utils.dart' as ImageUtils;

class WebGL_Custom_Attributes_Particles  {
  var container, camera, scene, renderer, sphere;
  var uniforms, amplitude, color;
  var attributes, size, customColor;

  var rnd = new Math.Random();

  final vertexShader = 
"""
uniform float amplitude;
attribute float size;
attribute vec3 customColor;

varying vec3 vColor;

void main() {

  vColor = customColor;

  vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );

  //gl_PointSize = size;
  gl_PointSize = size * ( 300.0 / length( mvPosition.xyz ) );

  gl_Position = projectionMatrix * mvPosition;

}
""";

  final fragmentShader = 
""" 
uniform vec3 color;
uniform sampler2D texture;

varying vec3 vColor;

void main() {

  gl_FragColor = vec4( color * vColor, 1.0 );
  gl_FragColor = gl_FragColor * texture2D( texture, gl_PointCoord );

}
""";


  void run() {
    init();
    animate(0);
  }

  void init() {

    container = new Element.tag('div');
    document.body.nodes.add( container );

    camera = new PerspectiveCamera( 40.0, window.innerWidth / window.innerHeight, 1.0, 10000.00 )
    ..position.y = 300.0;

    scene = new Scene();

    size = new Attribute.float();
    customColor = new Attribute.color();

    attributes = { "size"        : size,
                   "customColor" : customColor };

    amplitude = new Uniform.float(1.0);
    color = new Uniform.color(0xffffff);

    uniforms = { "amplitude" : amplitude,
                 "color"     : color,
                 "texture"   : ImageUtils.loadTexture("threejs.org/examples/textures/sprites/spark1.png") };

    var shaderMaterial = new ShaderMaterial(uniforms:       uniforms,
                                            attributes:     attributes,
                                            vertexShader:   vertexShader,
                                            fragmentShader: fragmentShader,
                                            blending:       AdditiveBlending,
                                            depthTest:      false,
                                            transparent:    true);



    var radius = 200.0;
    var geometry = new Geometry();

    for ( var i = 0; i < 100000; i++ ) {

      var vertex = new Vector3.zero();
      vertex.x = rnd.nextDouble() * 2 - 1;
      vertex.y = rnd.nextDouble() * 2 - 1;
      vertex.z = rnd.nextDouble() * 2 - 1;
      vertex.scale(radius);

      geometry.vertices.add( vertex );

    }

    sphere = new ParticleSystem( geometry, shaderMaterial );

    sphere.isDynamic = true;
    //sphere.sortParticles = true;

    var vertices = sphere.geometry.vertices;

    for( var v = 0; v < vertices.length; v++ ) {

      size.value.add(10.0);
      customColor.value.add(new Color( 0xffaa00 ));

      if ( vertices[ v ].x < 0 )
        customColor.value[ v ].setHSL( 0.5 + 0.1 * ( v / vertices.length ), 0.7, 0.5 );
      else
        customColor.value[ v ].setHSL( 0.0 + 0.1 * ( v / vertices.length ), 0.9, 0.5 );

    }

    scene.add( sphere );

    renderer = new WebGLRenderer();
    renderer.setSize( window.innerWidth, window.innerHeight );
    renderer.sortObjects = false;

    container.nodes.add( renderer.domElement );

    window.onResize.listen(onWindowResize);
  }

  onWindowResize(event) {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize( window.innerWidth, window.innerHeight );
  }

  animate(num time) {
    window.requestAnimationFrame( animate );
    render();
  }

  render() {

    var time = new DateTime.now().millisecondsSinceEpoch * 0.0001;

    sphere.rotation.z = 0.01 * time;

    for( var i = 0; i < size.value.length; i++ ) {

      size.value[ i ] = 14 + 13 * Math.sin( 0.1 * i + time );

    }

    size.needsUpdate = true;

    renderer.render( scene, camera );

  }

}

void main() {
  new WebGL_Custom_Attributes_Particles().run();
}

[nelsonsilva]

I'm working on getting this fixed but your example needs to use new Uniform.texture() for the texture uniform.

[nelsonsilva]

@br4ge I just added your example in the latest commit 1821d4c

[nelsonsilva]

@br4ge A couple of things to notice:

• The example is not working as expected, i'll file an issue to get it solve but feel free to give it a shot
• Notice the Uniform.texture i mentioned above here https://github.com/threeDart/three.dart/blob/latest/example/webgl_custom_attributes_particles/WebGL_Custom_Attributes_Particles.dart#L40
• Also, I just noticed some bugs when we use the millisecondsSinceEpoch to setup typed values (rotation, etc..) which i'm guessing overflows the float32 storage. So i'm using a delta and storing the start time (see https://github.com/threeDart/three.dart/blob/latest/example/webgl_custom_attributes_particles/WebGL_Custom_Attributes_Particles.dart#L113)