Cyberpunk 2077-Inspired Point Cloud Effects in TouchDesigner
ฝัง
- เผยแพร่เมื่อ 15 มิ.ย. 2024
- Get access to 200+ hours of TouchDesigner video training, a private Facebook group where Elburz Sorkhabi and Matthew Ragan answer all your questions, and twice-monthly group coaching/mastermind calls here: iihq.tv/Trial
Download video project files/resources: interactiveimmersive.ac-page....
If you’re a TouchDesigner Beginner, check out our TouchDesigner Tutorial Series! We teach you all the basics of how to use TouchDesigner, including mouse controls, hotkeys, parameters, the operator families, and more: interactiveimmersive.io/touch...
Taking inspiration from sci-fi and cyberpunk classics of the past, Cyberpunk 2077 presents a visual aesthetic equally gritty, vintage, and futuristic.
The retro-futurist aesthetic is taken even further during certain scenes throughout the game where the main character interacts with a firewall called the Darkwall - the environment transforms into a pixellated, glitchy computer rendering of dot matrix buildings and characters. For those who are familiar with them already, it looks like a world made of point clouds!
In this tutorial, Jack DiLaura walks you through creating point cloud effects inspired by the aesthetics of Cyberpunk 2077. You’ll start the effect from scratch, generating your own point clouds in a roughly Darkwall-like grid, and then transition to working with the point cloud data as textures, exploring the kind of possibilities this approach enables.
Finally, you’ll finish up the effect with a variety of post effects that aim to recreate some of the game’s subtle aesthetic touches, like chromatic aberration and bloom.
Chapters:
00:00:00 - Inspiration, Intro and Set Up
00:05:21 - Converting from SOP to CHOP and TOP format
00:11:08 - Animating the Noise
00:17:05 - Generating Movement with Noise Tops
00:22:43 - Applying Noise to Point Cloud Positions
00:28:14 - Applying Color to Points
00:34:07 - Corrections and adjustments
00:38:54 - Applying Chromatic Aberration and Blur Effects
00:45:39 - Adding Luma Blur and Texture to the Image
00:51:20 - More TouchDesigner and Immersive Content - บันเทิง
I love it how every project like this starts geeking out right from the first minute, you see this awesome scene from the X movie, with the girl, flying car and what not, now we will do the second glitched window behind the third car in the back.
Really really good tutorial! Explains everything from beginning to end to get a true understanding of why and how things work.
Thanks so much for this feedback, glad to hear you found it helpful! Cheers :)
Beautiful effect and very clear explanation and easy pace. I actually like your digressions to help understand the theory behind each step. Very well done sir.
We’re very glad to hear it, thanks so much for the feedback!
This is awesome! There are so many parameters to play with here
Thank you! Totally, there’s a lot of fun things to experiment with, and so many ways to change up the composition 🖼
Thank you for nice tutorial! 😀
Our pleasure! Thanks for watching :)
This is super cool! I wish I have the knowledge needed to drive the “noise wave” effect with a greyscale video input 😢 so much potential. Thanks a lot for your work!
Our pleasure! This is definitely possible with instancing, although could be a little tricky to get the video texture mapped correctly.
To get started in this direction, I’d recommend simplifying the geometry that you’re working with to make it easier to map the color of each pixel in the video to each instance. Instead of a multi-layered grid (which we created with the Copy SOP) just use the single layer grid created with the Grid SOP as the Translate OP for your instances. If you make sure that your Grid SOP generates the same number of rows and columns as the height and width of your video, you can then use the video to apply color to each one of the instances.
That said, we’re going to continue this series of point cloud-focused content, so stay tuned! More to come :)
I get something on fly using technique from tutorial, need a lot of tweaking for eye candy but it is something at this point of creation and dont have more time to play with it tonight, so yeah... its possible :D
th-cam.com/video/NkmnuO7l2Ds/w-d-xo.html
@@hinduspl This is awesome! I'm super duper new to touchdesigner and I'm trying to do something very similar to this. Would you mind sharing the project file or going over more specifically how you did this? I'm trying to follow the explanation above but without much success.
thank you so much, you're the best!!
Our pleasure! Thanks for watching :)
A really quick Chromatic Aberration trick in TD is to just use a LensDistort and mask the red or green channel. Then simply slightly decrease the K1 parameter.
That's a great tip, thanks for sharing! :)
🔥
The right-click auto-connect method at 6:00 works with left-click as well, FYI
Right clicking on the output of the Null SOP and selecting the SOP to CHOP from the OP Create Dialog will both add the SOP to CHOP to the network and automatically fill in the SOP parameter with a reference to the Null SOP.
If you left click on the output of the Null SOP, the OP Create Dialog window will not appear, and you’ll only be able to drag a connection to another SOP. Left clicking in an empty area of the network will bring up the OP Create Dialog and allow you to add the SOP to CHOP, but it won’t automatically fill in the SOP parameter.
You can drag the Null SOP onto the SOP to CHOP or the SOP to CHOP’s SOP parameter to automatically make the connection as well, but this would require an extra step, because you’d first have to add the SOP to CHOP to the network. The method we cover in the video just accomplishes the same thing but in a single step - a small shortcut for making your workflow a little bit faster. Hope that helps! 🙂
Thanks for sharing that technique. I wonder about one thing, pretty new to touch. Let me understand whats the difference between this technique showed in the video and another way of doing that so instancing array of points based on grid using geo, and moving those instanced points color and z direction according to provided noise top or video input ? Plus tweaking those tops to make them look more stylish. Just want to know. Thanks for sharing keep up great work.
Great question! Technically, you could say what we’re doing here is instancing - if you look inside of the Point Render COMP you’ll find a traditional geometry/rendering setup that uses the point cloud texture we send to the input to instance a series of points.
It’s definitely possible to approach this via an approach that focuses more on the integration with instancing, and very likely you could achieve a similar end result. The difference between the two approaches/which one you choose depends on what you’re looking to do with the information.
The approach this video takes is to explore a point cloud-based workflow, which is to say that we’re focusing on the creation and manipulation of data that defines the point cloud. So although we do end up rendering the content, the point cloud information that we generate and the workflow to get there doesn’t require that we use the data for instancing or rendering (as in, we still have a complete point cloud regardless of what we do with that data). We could export this information and use it somewhere else if we wanted to.
In the same way, instancing as a technique can be done without point cloud workflows. It can be looked at as something you do with data once you’ve created and manipulated it. Unlike the point cloud approach, the geometry/data you generate isn’t necessarily complete by itself (and not as easy to export). But that's not necessarily an issue, as you're likely going to be working with this method with the goal of rendering the output to a texture anyway.
Although the final results could be very similar (if rendered), the processes and the resulting data are different. Hope that helps!
Damn!! 🤩
🌟 Thanks for watching!
Excellent tut! Well explained, good pace.
Is there a way to combine noise influence of motion with a controlled input moving select particles on the z-axis, but selected via X,Y coordinates? Or is there a way to limit the noise effect on the X,Y of the grid dynamically?
We’re glad to hear it, thanks for the feedback! ✨
Yes, definitely - I’d recommend checking out the next video, which dives into using textures to manipulate point cloud positioning a little more: Generative Point Clouds in TouchDesigner - th-cam.com/video/__dHYGe9bQs/w-d-xo.html.
You can use a texture like a rectangle TOP or something similar that could “highlight” selected points (almost like a cursor), use a remap TOP to map/orient the texture to the axes you want it to be applied, and then composite this with the point cloud position texture to apply the effect. At around 32:00 in the above video, we start taking a look at the remap TOP for similar purposes, first for applying a texture across the point clouds, and then for manipulating the positions of the points. Hope that helps!
@@TheInteractiveImmersiveHQ Yes!! That is perfect TY! I'm trying to take an audio input, split it into various bands, extract data, and use it to manipulate the point cloud in a semi controlled way. Eventually adding live MIDI control for performance. Again, TYSM!
Wow! I love it! Do you know if is possible to add a kinect and how?
You could use the Kinect's depth sensor output as a replacement for the noise TOPs that are used in the video, as those are what influence the movement of the point cloud. It would probably require a pretty major overhaul to the project and experimentation to make it look similar, but the results could be worth it!
Thanks for the awesome tutorial!! Is there a way to animate the position of the wall itself? Usually use the camera, but can't seem to move it through the point render.
Nvm, I did it lol
Another approach could be using the Point Transform TOP: if you put a Point Transform TOP right before the Point Render COMP, you can adjust the position of the whole point cloud via the Translate parameter
awesome video! If I would want to add a human outline added to the patterns, like the output i can get from the nvidia background top, what would the process be of translating that top to point data?
Thanks! 🌟 You can definitely use this texture to apply color to the point cloud we’ve made in the video, and some movement to the points (though it won’t be quite like a real 3D scan). I’d recommend checking out the next video in the series, where we cover using textures in this way in more detail: Generative Point Clouds in TouchDesigner - th-cam.com/video/__dHYGe9bQs/w-d-xo.html. Although a Ramp TOP is used in that video, you can replace that with the texture from the Nvidia Background TOP. You’ll need to work with the width/height of the point cloud to match the aspect ratio (otherwise it’ll likely look stretched). I’d also recommend playing with the math TOP and compositing modes to try and fine tune the modifications to the point positions. Hope that helps!
Forgot to mention: the second video also has you build different geometry using SOPs, but you can take the same set of SOPs from this video and reuse them instead to work with the wall-style point cloud.
siiiiiiick
♥️♥️♥️
Amazing tutorial! well, explain.....I want to ask how we can interact with Kinect?
Thanks, glad to hear you found it helpful! The Kinect does have the ability to output a point cloud from its depth sensor, which you could composite with the CHOP to TOP texture that we use to displace the positions of the grid geometry. This will probably need a bit of finessing as the resolutions are likely not the same. You could also use Kinect CHOP channels to control different aspects of the Noise TOPs based on specific movements.
How can i add custom inputs, like a depth map, video, etc?
I’d recommend checking out our latest video for an example of how you might approach this: Generative Point Clouds in TouchDesigner - th-cam.com/video/__dHYGe9bQs/w-d-xo.html. In that video we use a Ramp TOP to modify the point cloud, but it could be replaced with any TOP texture that you want to use. The key component here is working with a Remap TOP to map the texture you want to work with correctly to the points in the point cloud. Hope that helps!
hi so I’m pretty new to touchdesigner and for some reason my point render doesn’t display anything and I’m wondering if there’s any way to fix that
In the center of the Point Render node should be a preview of the node's output. Do you see anything at all in the viewer? It's possible to disable the viewer by clicking the circle icon at the top left corner of the node, double check that the viewer hasn't been turned off accidentally.
Second, it's possible that the pointRender COMP's camera position is not centered. In the parameter window, try clicking the Home Camera pulse button and see if that fixes things.
Try these first, and let us know how you fare!
can this be exported to 3d programs like blender as an object?
The simplest option would be to use a Movie File Out TOP to save an .exr file, which is a commonly used file format for point clouds. You should be able to import/use this file in most common 3D programs. Hope that helps!
Mine crashes as soon as I try adjust the pointRender. I can’t figure out why….
Hmm.. First thing I'd check is that you've updated to the latest version, but that isn't necessarily a guaranteed fix.
Usually, when TD crashes, it'll output a .DMP file in your project folder with a label like "TouchDesignerCrash", followed by the version number and then the .dmp extension.
When we're running into mysterious crashes like this, we'll post the .dmp file to the Derivative forum: forum.derivative.ca (this is the company that makes TouchDesigner) and they will look through the file and help figure out the issue. Hope that helps!
I’m da fastest
🚀🚀🚀
Is it normal to not know a lot of the stuff you're talking about and to just follow the steps youre doing lol
😂😂 Haha yes! You’d be surprised by the number of people who start learning this way - sometimes it’s better to learn by doing! 📚