Stylized Floating island being prepped for R3F | Poimandres | Page 1

polar minnow Jan 8, 2023, 5:00 PM

#

First attempt at modelling a stylized floating island in blender before trying to integrating with R3F in code 🥳 . This is gonna be a proof of concept and for sure will no doubt bring up limitations or challenges.. There's going to be some GPU or instanced flying particles and an orb you can move around and mouse click interactions with the particles + maybe a night time version. Let me know your thoughts guys, really do love all the stuff people do here ❤️‍🔥😎

Blender__C__Users_44746_Documents_web-floating-island_floating_island-final-base-3.1-finalizing.blend_08_01_2023_16_57_48.png

coarse ridge Jan 8, 2023, 5:23 PM

#

I'm interested to see your journey

polar minnow Jan 8, 2023, 5:52 PM

#

Yea I’m going to do a full write up/ tutorial on all the resources techniques I’m using / any modifications to the plan. Will be sure to post some ss’s or videos as I go on this post 🙂

polar minnow Jan 8, 2023, 11:38 PM

#

Good progress 🙂 UVs sorted for base mesh, need to fix gusts texture and export the grass positional vectors for instancing into JSON. Used a nextjs starter kit https://dev.to/whoisryosuke/react-three-fiber-and-nextjs-starter-template-3cp0 which really accelerated getting the base mesh through gltfjsx 🙂 hdri maker for the custom background, the base is a different color to the background's top.

Welcome_-_R3F_Next_Starter_-_Google_Chrome_08_01_2023_23_34_23.png

DEV Community 👩‍💻👨‍💻

React Three Fiber and NextJS Starter Template

I’ve been really getting into 3D and game development, from Blender and Maya to Unity and Unreal...

coarse ridge Jan 9, 2023, 8:28 AM

#

I'm curious to see how you handle foliage painting converting to instances

polar minnow Jan 9, 2023, 8:39 AM

#

I take it you mean the grass? going to export the positions via a script into json https://www.thefrontdev.co.uk/exporting-vertex-data-from-blender-into-a-r3f-project-and-instancing. The base mesh will have a diffuse or a combined bake (for the alpha and + color) and then use r3f instancing 🙂

#

some playing around with noise and rotation

#

alpha clipping basically *

#

get 3-4 grass strands for 4 verticies

coarse ridge Jan 9, 2023, 5:02 PM

#

Ah! Thanks for sharing

polar minnow Jan 10, 2023, 6:32 AM

#

test with dummy grass, needs some tweaking 😆

polar minnow Jan 11, 2023, 8:47 PM

#

https://beamish-centaur-d5e715.netlify.app/

Welcome! - R3F Next Starter

This is a batteries included template for using React Three Fiber (R3F) with NextJS 🔋.

#

Very very first hosted mvp

#

Can I am why a combined bake for a semi transparent wind gust is bright in blender but very vague in threejs?

#

Also camera isn’t positioned yet

#

Zoom out lol

#

Can I ask*

polar minnow Jan 12, 2023, 10:29 PM

#

adding some fireflies, custom sprite not added yet

Welcome_-_R3F_Next_Starter_-_Google_Chrome_12_01_2023_22_28_28.png

#

should be on the link soon

#

technique was to store positional data inside images/textures and then read in r3f shaderMaterials for points. You have to give the points material dummy positions (doesnt matter what vecs this is) just has to be total number or particles and a index for each particle so you can make some uvs for a long 1 px height image. And then read the data out of the color pixel, making sure you store it as non color in the blender python script

#Stylized Floating island being prepped for R3F