Error with SSR Three.js Objects

Thank you so much for your help and emailing me those files! It appears I had missed a couple THREE. prefixes in the Utils Geom as well as having a bit of code out of order in the parsing. Now I just have to add in the color code :smiley:

You know what this means man? I owe you a round of beers!

If you find yourself in San Francisco, google me “Michael Paccione San Francisco”. It’s on the house ^^

Thanks for sticking with me on it. If you need quick feedback on your startup in the future feel free to reach out.

Cheers!

Great! Glad that got you unstuck.

Totally up for beers when I’m on your side of the globe.

1 Like

I added indexedDB in and tightened up some other code but of course I can’t figure out the 3D aspect for buffer coloring.

After reading it appeared that I had to create an integer array with the RGB values and that was to map to vertices and then by setting the mesh to use vertexColor then I thought it would work. I was going off the pattern that the amount of color array should match the other geometry attribute array counts.

When the Float32Array count matches the other counts then they are all the same color.
When it was greater then the other arrays then some of the cubes are different colors.

Here is a photo of what is appears like when I have an excess count in my color TypedArray:

Here is my updated colorData function:

// Intensity Coloring
colorData = percentage => {
	let rgbString = "",
	    r         = parseInt(percentage * 25.5),
	    g         = 255 - r;

	r = r < 0 ? 0 : r;

	return new Float32Array( [
		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0, 

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,  

		 r,  g,  0,  
		 r,  g,  0,  
		 r,  g,  0,    		 		 		 		            
	] );
}

Here is the main if statement that runs the whole thing:

if (response.statusCode == 200) {
	const parsedBody   = JSON.parse(body),
		  quakeArr     = new Array(parsedBody.metadata.count),
		  centerVector = new THREE.Vector3(0,0,0),
		  cubeMat      = new THREE.MeshBasicMaterial({ vertexColors: THREE.VertexColors }),
		  cubes 	   = [];

	// Data Parsing
    for (const feature of parsedBody.features) {
    		  // Quake Obj
        const magnitude   = feature.properties.mag,
              location    = feature.properties.place,
              time        = feature.properties.time,
              coordinates = feature.geometry.coordinates,
              quake       = {
                               "magnitude":   magnitude,
                               "location":    location,
                               "time":        time,
                               "coordinates": coordinates
                            },
              // Three Data Obj
              quakeVector = longLatToSphere(coordinates[0], coordinates[1], 600),
              rgb         = colorData(magnitude),
              cubeHeight  = magnitude > 0 ? (magnitude ** 3) * 1.75 : 0,
        	  cubeGeom    = new THREE.BoxBufferGeometry(3, 3, cubeHeight, 1, 1, 1),
        	  cube        = new THREE.Mesh(cubeGeom, cubeMat);

		cubeGeom.addAttribute( 'color', new THREE.BufferAttribute( rgb, 3, true ) );

        cube.position.set(quakeVector.x, quakeVector.y, quakeVector.z);
        cube.lookAt(centerVector);
        cube.updateMatrix();
        cube.geometry.applyMatrix(cube.matrix);

        quakeArr.push(quake);
        cubes.push(cube);
    }

    // create a new mesh, containing all the other meshes.
    const geom     = BufferGeometryUtils.mergeBufferGeometries(cubes.map(c=>c.geometry)),
    	  combined = new THREE.Mesh(geom, cubeMat);

    combined.name = `data${i}`;

    // Data Sorting by Highest Magnitude
    quakeArr.sort((a, b) => b.magnitude - a.magnitude);
    // Store in Global
	quakes[i]    = quakeArr;
	threeData[i] = combined.toJSON();

}

Hi!
Looks like you want to interpolate green to red in dependence of percentage.
Why not use .lerp() method of THREE.Color()?

Something like this:

var baseGreen = new THREE.Color(0x00ff00);
var baseRed = new THREE.Color(0xff0000);
var interColor = new THREE.Color(); // for re-use
...
colorData = percentage => {
  interColor.copy(baseGreen).lerp(baseRed, percentage * 0.1); // seems `percentage` is from 0  to 10, but `alpha` parameter has to be 0.0 .. 1.0 
  let colors = [];
  for (let i = 0; i < 24; i++){
    interColor.toArray(colors, i * 3);
  }
  return new Float32Array(colors);
}

The returned typed array will contain values [0.0 .. 1.0] in its items, thus you don’t need the third parameter in this line (true):

cubeGeom.addAttribute( 'color', new THREE.BufferAttribute( rgb, 3, true ) );

so put it as

cubeGeom.addAttribute( 'color', new THREE.BufferAttribute( rgb, 3 ) );

Just a short example: https://jsfiddle.net/prisoner849/pv4q01u2/

3 Likes

Brilliant! This most certainly fixed it!

image

Thank you for your help as I am now better understanding BufferGeometries, Float Arrays, and how they work together.

I suppose my only other question is why a loop to 24? Is it about having 6 faces and 4 points for each because 2 are shared? Everything in 3D is seemingly triangles and each triangle has 3 vertices but perhaps in this calc 2 vertices are shared when they are touching in the box buffer? Trying to understand the 3D concept here.

1 Like

BoxBufferGeometry has 24 vertices: 4 vertrices per side * 6 sides = 24.
Just to have better understanding, take a look at the source code of this geometry, see how it forms sides:

Possibly, you expect that there must be 8 vertices in total, but it’s not like that, when you create a box of 1 x 1 x 1 with 1 segment per dimension, constructor creates 6 planes in order: +x, -x, +y, -y, +z, -z. Each plane contains 4 vertices and its index defines 2 triangles (faces).

PS Nice look of the globe with all those lines :+1:

1 Like

Also, if you want to have green -> yellow -> red transition, then use .lerpHSL() method instead of .lerp() (as lerp() gives green -> strange dark yellow-brownish -> red)
I’ve updated the fiddle, saving lerp() in the comment.

1 Like

That did wonders for the color vibrance. Saturation and Lightness lerping really made this crisp.

I think I will play with it a bit so it gets red faster. Thinking there’s too much yellow midtones. Now this is definitely an improvement over my past implementation. Despite moving from client to SSR, it was visually the same but this new mixing is most certainly a visually noticeable improvement.

Oooh vibrance!

2 Likes

I just want to say that it’s absolutely wonderful and inspiring to see the lengths to which people on this forum go to help one another. Different class :smiley: !

2 Likes

Nowhere near as sexy as yours as it was just a learning project, but I made a globe that has both earthquakes and eruptions that took place over the past week. Click on the markers and you get some info and stuff.

2 Likes

It has been a long journey! I’m on V3 of this software now. I made V1 for a digital art class way back when Three was around R70.

I really want to thank the Three.js community on Stack Overflow and Discourse for helping me so much. As a self taught programmer it really can be hard when you don’t understand a concept and you just bang your head against a wall for days and days with trial and error. Sometimes you’d never get it without help. I really appreciate how people contributing X time has saved me from wasting X^3 of my life. Hooray life efficiency improvements!

@TheHappyKoala
I checked out you globe project! It’s interesting right some of your point’s look like spheres and some look like cubes. Am I drunk or something, what’s happening with that :slight_smile: Very cool that the GVP offers full reports like that. I’m curious about your world texture and the background. Firstly, is that an anime background? Secondly, where did you source your world texture!? I like that yours has volcanoes. You might like this one if you haven’t seen it, super cool: https://radio.garden/ (I’m secretly learning Russian from their radio stations… aye На здоровье… xD)

I have been looking into this, you might find it useful for projects …

It offers a night texture for the world and I could see myself using that in V4 for creating an accurate SUN/NIGHT cycle in the Simulation mode. I figure I have enough barebones shader chops to figure that out myself… eventually xD. It also might come in handy for my open source Everest Flight Simulator here: GitHub - mpaccione/everest_flight_sim: Helicopter Flight Sim - Three.js debugger-simulation is the latest branch…feel free to fork or collab if you want more three practice. I will end up needing some math help to make it more like true flight sim rather than like arcade flight sim. Also, I’m looking forward to creating my own texture AJAX loader for dynamic plane zones (apparently Everest is too vast to load without crashing your browser ) along with… wait for it… MORE SSR Three.js… :smiley:

3 Likes

This is the most progressive method of learing I’ve ever heard about :smiley: Feel free to ask in PM, if you’ve got any questions or difficulties with Russian language :beers:

1 Like

Haha, no, you’re not drunk, they’re supposed to be circles but they only have something like 6 segments, so they do look kind of squareish. The background is actually a photograph taken of a lava flow entering the ocean. It’s stunningly beautiful with the tree in the foreground. Believe it was taken in Hawaii.

Regarding the globe texture, damn, wish my memory wasn’t as shoddy as it is, but I genuinely can’t remember where I dug it up. Probably googled “Earth topograhical map” or something along those lines. Remember I was trying to find a good blank texture with only the plate boundaries drawn out, but then again you can kind of infer them from the locations of the earthquakes and eruptions.

Yea, kudos to the GVP for making creating that feed. Working with XML is a royal pain, though :laughing:.

That looks super duper awesome, your project! Very interested in making a contribution, so I’ve forked it and will be reading through the code and jump right into it as soon as I’m done with this WordPress site that I have to deliver by the beginning of next week :sweat_smile:. The map generator looks like something I might use for my personal space simulator project for which I’m currently introducing space flight, and that will eventually include things like landing on the Moon and so forth, so that will definitely come in handy.

Man, three.js is a blast, but now I have to get back to the world of WordPress custom post types and hooks :laughing:

P.S. Radio garden is like the coolest thing ever. Wish the code was open source, but don’t think it is, or at least I haven’t been able to find it. Could learn so much from it as a self-taught dev, like yourself.

2 Likes

@prisoner849 Thanks! I’ll be listening to NRJ Moscow 104.2FM in the meantime!

@TheHappyKoala Wow, I’m surprised that photo in the background looks super stylized like digital art.

…You’re building a space simulator? This is a dangerous game of Three brinkmanship! The next level has to be recreating the Higgs-Boson collider in Three.js… but what happens to space time when we create a WebGL black hole!? HMMMM?

I think your space simulator project has a lot of potential and it’s cool you have a team of people doing it. I like the rings of saturn, shader perhaps? I starred and followed :slight_smile:

My flight sim has a lot to be done on it but I have to finish v3 of https://quakeviz.app and release back into play store. I’m also aiming for a v1 release of Wordza: Language Learning Flashcards. https://wordza.app … if your curious I would recommend checking wordza out next week since I have to work with my backend dev about why the new user endpoint is fcked. Quake viz has some missing features but is usable.

This one’s for you man:

2 Likes

Yea, well, what can I say other than that mother nature is a stunner :wink:

I guess, if you somehow manage to contrive an actual webgl black hole, you’re left with nothing but a, hms, black screen? You can toss uniforms into it at leisure, but nothing will ever come of it. Haha, I’ve actually pondered how you could go about simulating a particle accelerator in webgl. I guess the biggest challenge would be to represent the whole thing in a meaningful way visually. I mean, how do you differentiate the appearance of one particle from another? The rest is just kinetic energy and then you throw the probabilities for what, for instance, a higgs boson decays into and then you’ll have yourself a decent enough hadron collider running in your browswer :rofl:.

Finally wraped up that god awful wordpress site, well, I shouldn’t say that, because it’s food n da table, but yea, I’m looking forward to mounting an assault on your Everest flight sim. Does it take the rapidly declining density of the atmosphere, at those altitudes, into account???

Nah, well, there’s a shader for the particles, but not for the physics calculations. I know you can preserve state in a shader by writing to a texture, but man, my knowledge of shaders is to webgl what a single celled organism is to the tree of life… Still some way to go before anything interesting takes shape, and when it does, it will be by chance, anyways :roll_eyes:

Love your quake app. Does it have something like push notifications to alert you when a really big quake has taken place?

You should do a write up on the whole business of the benefits of ssr for three.js apps. I’m curious to learn more.

Oh, and cheers for the links. Gave me somewhat of a webgl inferiority complex, though :rofl:

1 Like

Thanks you helped me too

1 Like