13.2 Graphics

I work with John, front end team on graphics. So today's talk is mainly about the updates on graphics. We'll cover both 13.1 and 13.2 features including job shadowing and blurring and also 3D navigation. We haven't updated for quite a couple of versions, but we now have three more three navigations there and also absolute options we have so many complaints about. The absolute option did not resolve the automatic and those symbolic values and we re implemented it for graphics. So now it just works for almost all the options for graphics and graphics, 3D and axis object we get very good feedbacks. And then so for the new versions we push a little more to 3D. And other than that there are several other improvements as well. Finally, I will cover a little bit about surface parents. Okay. Job shadowing. So sometimes when you look at some of the let's say Mac platform, looking at the assistant window, there are controls, interactions for interactions and their fonts. You can see this little nice visual effects there. You might wondering it would be nice if we had that with our graphics. But now with 13.1 we have it and it works just like other graphics components for all the platforms and also works fine with server environment. So the syntax is straightforward. So you can specify offset, you can specify the blur radius and also you can define the color and even the opacity scale. So here I'm changing the blur radius of the background and you can also adjust the offset. So we can switch between hard shadow and soft shadow and also define a color to it. And other than that it was doing in alpha channel but on top of that you can also adjust the opacity scale of that and to achieve users preference. And so here are some examples and these font styling all implemented with job shadowing. And if you are interested, here is all the original input form of that. And you can see that you can construct the glow effects and change the background and it will look a little bit different. And you can define a soft shadow, hard shadow outline, hollow. And also even you can have some of the constructor, some of the 3D shadow and it is not just fonts. And we make it work with all the 2D primitives. So here if you insert a button, this button, you will have a job shadow for all the three platforms. Rectangle, you can define your own controls by implementing with rectangles as well and curves, circles and polygons. And even you can apply a complicated pattern form to a polygon and then have that drop shadow of that. And also it works fine with all the polygon with whole different complicated cases. It should just works. And it could be applied to almost any 2D visualization functions. Just like other primitive other directive. Here are a list of examples here and the things I want to mention that is you can apply. If you really like it, you can apply it specify that in your personal style sheet and then it should just do the work for you. Have that drop shadowing effect for everything. Next I'm going to talk about blurring. Unlike drop shadowing which is help the object stand out. Blurring is kind of like a make things a little bit less noticeable. And it also supports all the 2D objects and including raster box. The syntax is a little bit straightforward and it's just one argument. And it could be a number which applies both XY direction. Or you can specify XY direction separately and have a little bit of motion blur if effects around that direction. And here is a little example that to make use of blur that have the background objects less noticeable. But the active one drawing as normal. So it's more in my catch people's eye more on these objects. There can be multiple uses. Another possible use it is to have depth of field results like to simulate what the camera does. And it is here is just simple example. You have a list of images and these images has transparent background. And you apply different blur level to it. And then you can just have the like a picture art result and you have fully control of it. And it also works with 3D as well.

Yeah, can I combine.

That's a very good question. So like the demo I showed for the pattern filling. So you can. It could be done through inset. So the internal. You can apply drop shadowing or you can apply blurring and then you insert it into outside graphics. Apply the drop shadow to it. Then it'll have burst and it could have nested. It just depends on your need.

Are these features only available in inside of graphics and graphics? Or can I actually enable drop shadowing of let's say my code robots or whatever?

No, currently it only works within the graphics environment. Not even with 3D environment. Yeah, yeah. But you can rasterize the 3D to achieve something with that.

So.

So this is the 3D results I think. In the previous conference I got a user got a question about how to generate a blur background of 3D graphics. But the front objects does not get blurred. So you can do the same thing like I did for the leaves. You can generate a bunch of graphics and you are depend on their different depths and then apply different blur levels. So this is a result you get and you can also combine material shading to it. So you can use this to generate very photorealistic results. And the blur the focus and also the occlusion will give the user a feeling that is. Oh, it's kind of like from a physical camera. You can also do that interactively. This is a little example. You can change it just simply change the parameter of the. Of the blur directive and apply to different objects. You can see that now the focus is in the back and now it's somewhere here and the front is a little blurred. Just like what the camera all the camera does.

Will the blurring and drop shadowing survive export the graphics to?

Yeah, yeah. It can be exported to any format. The the things is it will be rasterized. Yeah. So like drop shadowing it also work with other 2D visualization functions and you can specific just like other plot styling and to the objects you are you're interested and yeah to have different results. And this is just to generate a mask blurring mask for the. For the country. Oh. So next topic is about the 3D navigation. We for quite a few versions since version 6 we have the 3D navigation of like a rotation zooming pan and also view vertical rotating. Just you're changing the view vertical. So there are different icons for that. But for the 132 we add three more 3D navigations. So one of them is the camera dually. It is kind of like zooming. But the thing is different from zoom is zoom just change the view angle. So if there's objects in front of you, you cannot get rid of it by zooming. But you can with camera dually. What it does is just moving the camera viewpoint, actual viewpoint, so it can go through the object. You can also pick a view center, pick an object as the view center so that it could rotate around that object and you can also have a look around. So what look around is a little bit similar to rotation. Rotation is rotate view point around the view center. But the look around it is do the opposite way it rotate the view center around the viewpoint for just the rooking around. And here is a simple example here. If I have the keys, you can see that this is a rotation cursor which means you are in rotation mode. This is translation and this is zooming. This is the animation that is camera durie. You can see that you can go through objects and you can also pick an object and rotate around that object. We have point to selection algorithms for that. And also there are the camera looking around, the cursor is like this. So looking around. So we make. We have the shortcut there. So just to make it easier for user to try. If it is. That is very good question. If it is not, just select an object, it will not change the view center because it didn't find an object. Let me try. Yeah, it does not see. Yeah. So it does not change the view center. Okay. Select the object to rotate around. It is a peak view. It is called a peak view center. It's a shift apple key. It's a. Yeah, yeah. Oh, sorry. It's a alt shift key. Yeah. You see this little cross. Rotator is you are moving the camera around the view center. You have a focus there. But for this look around thing, it's just. You do not have a focus. This thing is a little bit like translate, but translate is just moving just the 2D center. So the 3D object itself does not change. But here you can tell it is the camera. There are some little bit of change. You can see it is the center has been changed and the viewpoint does not. Yeah, there is. So for the 3D interactions there are always two type which might confuse user is you're actually changing the word or you are changing yourself because the result is same. But I think in the next version we will have a function that is let you visualize all the parameters of camera that will help you understand what is really changing and for example visualize the viewpoint and view vertical. All things like that. Actually we did have something we just did having to put it. Having to review it and put it in the function repository. Yeah, definitely we have something for next version. So absolute options. Like I mentioned so many complaints about like automatic not getting resolved and. But now we do and all those automatic cases are resolved. Like some of the cases are interested by images as what's the actual value? What's the actual image? Padding. What's actual plot. Right, padding. And you can query it and then if you specify all the options you are guaranteed to have the exact results as the automatic case you get from. And it works for both 2D and 3D. Even though 2D and 3D might have different option values like for those ticks and frame ticks. And you can also get a list of a real tick there which is pre computed somewhere. Yeah, that's absolute options there. Axis object. We now are pushing forward for 3D but it is currently the design has not been done yet. It is not documented. But it does work in version 3:13 too. So if you are interested, you can try with it you can specify both XYZ direction. You can also actually put the path there as lines and B spline curves there. The things different from other axis origin is it has real depth perception there. So like if you previously specify axis origin it just always drop on top of everything. But for this new Axis 3D object it could be occluded depends on depth. Here's the example. You can specify with a line or curve with it. So it could be obscured. And if you look in this direction you get it. So yeah, that's. I'm sure for next version we will have much more to say about this. And other than that we also have other improvements like, for example 3D80 enlisting quality. You now can set at the graphics level. Previously it's global. If you change it, it will affect all the others. But now you can contribute just to the specific graphics you want. You can tell that this is no alt lsing but this is with full Atlassian over here. And hatch feeling now works with Rasterbox now it could give some nice results like this. And both hatch feeling and pattern filling now works with fonts as well. So you can apply any pattern including a texture to a font. It just works to have fully customized font. And also B spline surface normal. The current normal generation is based on the B spline surface evaluation process. It depends on the directive of both U direction and the V direction. I've used a cross product of that so that this is based on assumption that this surface is smooth surface. For some of the cases you are specifying it which is not smooth surface like this case. So smooth surface will give the some like around here it give different result than what you expect. But you have the choice method option there to get to ignore that and then recompute the. The vertex normal triangle by triangle. So you can get this. So but there are. There are some downsides there. So you can see it looks not as smooth over here. Those surface supposed to be small, supposed to be smooth. Yeah. Default is this one. Because we think most of the B spline surfaces is a smooth case. So in that case you can generate a less polygon less points to achieve the smooth result.

Is it also smoothing?

Yeah, it is. It is transition. Because the. The. The way we specify this B spline surface is a transition inside. So that's why it's getting the dark results. It's getting flipped into inside. Yeah.

If I wanted to just specify the smooth A collection like this.

Yeah, yeah, yeah, you can do that. Yeah, you can do that by splitting them. Yeah. So finally I want to talk about Surface parents. We have so many these new features and they are all built on top of Surface parents. They are developed with Surface parents mainly by a charts team. And so here is a list of them including the drop shadowing and burying and also material shedding, the physics based lighting and CST region which does some of the ray tracing, doing the geometry binary operation on hardware. And so this tells us something that it gives user a lot of flexibility to do a lot of things, which means user can use that to develop their own things and define their own functions for visualizing. And so together with Taq I have a reference page attached to includes all the details of Surface parents. So if you are interested you can go through it if you want to play with it. And there are also examples there. So now I just. Well, sync.

Switch back.

Yeah, so I will just introduce a very simple example here. And the structure is straightforward as well. There are some metadata there. You need to give the name, you need to tell the program what kind of attributes they use. Like the position information, the vertex color and the vertex texture coordinate information from the primitive. And also most important you specify the gel sign shader there. These are standard geostron shadows for vertex program for fragment shadows. And so yeah, here's the example. Like we simple enough, we define our customized way of texture mapping. And these shadows are here and let's load it and see what's the content of that. You see. So vertex shader is straightforward as well. You have the position from primitive like a disk, whatever and then apply matrix. This matrix allows you to like resize it. It will change accordingly and then pass along, just pass along the vertex coordinates and in the fragment what you do is just sample the texture like normal. And here what I did is just convert it to grayscale and then apply this grayscale to the final result. And yeah, that's simple enough. And how do we do that? First you need to add this piece of self defined Surface parents to our language, to our library. So use the FE private, add a Surface parent definition and after that you can look and to see if it is added correctly and using list the definition I referenced my name and if it is not added successfully it will return failed. Otherwise it will just give further details. You can see this is the metadata was specified and we are using the system matrix. And also this is a fragment shadow. We just looked just previously. So then we added how do we use it? You just use Surface parents giving the name. And if there it defines several parameters. It passes along parameters together with the name and it will just work like other functions. So this is what we get. You can see the texture is this color, but it turns into grayscale and then apply. Simple enough. But what could it bring us? First it allows you customize rendering for both 2D and 3D because you are defining the behavior, you're passing on the actual program and running on gpu. And another possibility of benefit is that it could move computing from CPU to gpu. That way we could reduce our CPU cost, our memory cost. Sometimes it also saves you mass link. Most cases mass link chips. And these could all help to optimize our application and make it much more faster. And here is an example I used. It is I get all these GSLAN samples From this page WebGL page and I just put it in the local files. And then what I did is just, I'm trying to import a video and what I did is simply just apply Surface Parents in front of it. And here are the results. And you can see this is real time image video effects. And if you take a look, the frame rate, it's 36.8, 36. It's just real time, no cost. And you can export this to another video file. And that means from the original one to the final new one, you get image process, you get the video processed at real time. And all the computing has happened at the running time. So yeah, that's all my talk. I think we are running late and if you still have questions, you can email me and talk to me after the talk. Okay, thank you.