It worsk as expected… I have a plane and set its scale to this.mesh.scale.set(1200, 750), I need this to be 1x1 ratio to the HTML page where I use this…
When trying to work with the VertexShader modifying the x and y works as expected for example
vec3 newPosition = vec3(position);
newPosition.x += 0.5; - works as expected
newPostion.y += 0.5; - works as expected
newPostion.z += 0.5; dose nothing visually, I need to use a large number like 300. to see some changes,
I need to understand the z so that I can continue with my project, I need to do some bending and the z makes no sense to me, I don’t understand what is going on.
Yeah it makes sense but I thought in the vertex shader in local space the values are from -0.5 to 0.5, I thought the camera dose not affect this in the vertex shader local space…
vec4 mvPosition = vec4( transformed, 1.0 ); // <- Local space
// ...
mvPosition = modelViewMatrix * mvPosition; // <- World space
gl_Position = projectionMatrix * mvPosition; // <- Final-view-or-however-you-d-like-to-call-it space
position input to the vertex shader is from -Infinity to +Infinity, not -0.5 to +0.5. It defines the position of the vertex position relative to the center of the mesh. This position is relative to (0, 0, 0) of your Mesh.
mvPosition is the “world space” position - so that same position attribute multiplied by the model transformation. This position is relative to (0, 0, 0) of your Scene.
gl_Position is kinda abstract, but all it does is applying the camera transformations / FOV perspective etc. to the mvPosition. When coding vertex shader you’d usually not modify gl_Position directly - rather apply transformations to position / mvPosition and then do all the multiplications that transform that mvPosition into final gl_Position.
As for camera - camera may not affect the local space, but it affects the final rendering of the model - since it goes through the entire pipeline of localSpace x worldSpace x cameraSpace before it reaches the screen.
If you mean to do postprocessing-like effects like ShaderToy stuff on a full-screen plane, then z will always be constant (-600 in you case.) If plane covers the entire scene and is perpendicular to the camera - then there’s no depth in the scene, thus z can be neglected in all your shader calculations - and you can pretty much just skip the vertex shader altogether (do faux depth calculations only in the fragment shader instead, just like ShaderToy shaders do.)
I need to bend the vertices directly in the shader vertex something like in this example… https://designembraced.com/ but since I have no clue what z is is impossible to make this right…
is not about the camera, I just want to bend the plane for a starter but I can’t do the math the rotation matrix does nto work because of the fov thing, for example, if I try to use this to rotate vertice it just squares the vertices no rotation…
If I don’t change the FOV it works as expected.
vec3 rotateX(vec3 pos, float angle) {
float c = cos(angle);
float s = sin(angle);
return vec3( pos.x, pos.y * c - pos.z * s, pos.y * s + pos.z * c );
}
The curling of the pictures is a special effect that can be duplicated with geometric shapes.
To achieve the effect: For each image, create a small center mesh and position that mesh off to the left side by X. This is your main rotator. Then create a second small mesh which is positioned to the right by X, Add that second mesh to your first mesh. This second mesh should now appear directly ahead. You can rotate this mesh into and out of your field of view by z-rotating of the first mesh. If you just wanted the pictures to appear flat, you could just create a small plane which holds the picture and add it to that second mesh. You can repeat this with as many pictures as you like and space them in a circle by changing the starting Z-rotation of each center mesh. For now, you want to keep the mesh pairs separate - one for each picture.
To create the curling effect, you can create a portion of a cylinder without end caps, as previously described. You will want to use a large radius transparent cylinder so the curling is not excessive. Instead of putting the image on the outside of the cylinder, put it on the inside of the cylinder. Because you have made the cylinder so big, you will want to have the visible picture much smaller that the cylinder. And before turning this into a mesh, rotate the cylinder clockwise 90 degrees, so that it’s vertical axis is pointing to the side.
Now attach this cylinder to the second mesh in each of your mesh pairs . Finally, you will want to rotate this cylinder on the X-axis. You will need to perform some tests, to figure out how much to rotate the picture while it is in the visible area. It could be that simple X-rotating the cylinder by the same amount as you are Z-rotating the main mesh will be perfect.
Here is an example of what I was describing. It looks better as a full screen example, like this.
You would have to use something special to create the weird effect when you move the mouse directly over the picture. But I don’t think that really adds that much to the overall effect. So between this and what manthrax has provided below, you have all the pieces you need to duplicate the basic effect.
The other things like text and the authors names are also easily created using standard text and rotating objects. The nice thing is that, once you have it set up, three.js handles all the math for you.
), walking in the same direction the car is facing (ie. your “z axis”.)
?