New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added raymarching reflect example. #7860

Merged
merged 1 commit into from Dec 26, 2015

Conversation

Projects
None yet
4 participants
@gam0022
Contributor

gam0022 commented Dec 26, 2015

I added an example of raymarching reflect using ShaderMaterial.

@WestLangley

This comment has been minimized.

Collaborator

WestLangley commented Dec 26, 2015

Nice!

http://ci.threejs.org/api/pullrequests/7860/examples/webgl_raymarching_reflect.html

Consider using THREE.RawShaderMaterial, instead, as that is all that is required.

If you do so, you will have to add

    attribute vec3 position;

to the vertex shader.

mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );
renderer = new THREE.WebGLRenderer();

This comment has been minimized.

@WestLangley

WestLangley Dec 26, 2015

Collaborator

Should renderer.setPixelRatio( window.devicePixelRatio ); be added?

mrdoob added a commit that referenced this pull request Dec 26, 2015

@mrdoob mrdoob merged commit 109a9b9 into mrdoob:dev Dec 26, 2015

@mrdoob

This comment has been minimized.

Owner

mrdoob commented Dec 26, 2015

Nice! Thanks!

mrdoob added a commit that referenced this pull request Dec 26, 2015

@mrdoob

This comment has been minimized.

Owner

mrdoob commented Dec 26, 2015

@WestLangley Implemented your suggestions.

However... I think it would be cool if, instead of passing mouse and time to the shader we would simply pass the camera. I guess for that we have to decompose the camera matrix into position and direction?

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 26, 2015

Thank you for the comment and the merging!

@WestLangley

This comment has been minimized.

Collaborator

WestLangley commented Dec 27, 2015

I think it would be cool if, instead of passing mouse and time to the shader we would simply pass the camera. I guess for that we have to decompose the camera matrix into position and direction?

Agreed. camera.getWorldPosition( worldPos ) and camera.getWorldDirection( worldDir ) should do it.

@gam0022 Would you be willing to have a go at that?

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 27, 2015

Agreed. camera.getWorldPosition( worldPos ) and camera.getWorldDirection( worldDir ) should do it.
@gam0022 Would you be willing to have a go at that?

Yes, I got it.
Do you think that I should pass cameraPos and cameraDir to the shader as type: 'v3'?

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 27, 2015

Is this alright?
gam0022@f68e1fb

But screen began to black out by the cameraPos...

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 27, 2015

It was solved by adding dummyCamera for renderer.render().
gam0022@f94947d

Do you think it is this a good ?

function init() {
scene = new THREE.Scene();
camera = new THREE.Camera();

This comment has been minimized.

@WestLangley

WestLangley Dec 28, 2015

Collaborator

Hmmm. I just realized you are instantiating a THREE.Camera() and using a simplified vertex shader. This was also done in http://threejs.org/examples/webgl_shader.html. Personally, I would use an orthographic camera to render the quad, but your approach does appear to work...

@mrdoob -- Do you have an opinion on this?

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 28, 2015

I thank that there is no need to use the orthographic camera.
It's because projectionMatrix was not used in VertexShader.

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 28, 2015

In #7863, I used two cameras.

  1. Camera to render the THREE.PlaneBufferGeometry. (dummyCamera)
  2. Camera in the raymarching world.(camera)
@WestLangley

This comment has been minimized.

Collaborator

WestLangley commented Dec 28, 2015

I think that there is no need to use the orthographic camera.
It's because projectionMatrix was not used in VertexShader.

gl_Position must be in Normalized Device Coordinate space. So your approach only works because, in addition to the omission of the projection matrix, the PlaneBufferGeometry is 2 X 2 and centered at the origin.

I assume you copied this from another example, but I expect this will be confusing to users.

@greggman Have you seen this as a common technique for rendering a full-screen quad? (simplified vertex shader, careful positioniing of the quad so the projection matrix is not required)

@greggman

This comment has been minimized.

Contributor

greggman commented Dec 28, 2015

@WestLangley seems common to me. Isn't that what glslsandbox.com and shadertoy.com do? Isn't it also what http://threejs.org/examples/webgl_shader.html does? Or am I mis-understanding?

@WestLangley

This comment has been minimized.

Collaborator

WestLangley commented Dec 28, 2015

@greggman It is what webgl_shader.html does. I expect the OP copied that example. I am wondering if this is confusing to users -- especially since @mrdoob suggested:

I think it would be cool if, instead of passing mouse and time to the shader we would simply pass the camera.

At this point, I am no longer sure how that suggestion makes sense in the context of this example.

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 28, 2015

Thank you for comments.

gl_Position must be in Normalized Device Coordinate space. So your approach only works because, in addition to the omission of the projection matrix, the PlaneBufferGeometry is 2 X 2 and centered at the origin.

I now finally understand what you mean.

I assume you copied this from another example,

Yes, it is.

but I expect this will be confusing to users.

I think that there is some truth in what you says.

@gam0022

This comment has been minimized.

Contributor

gam0022 commented Dec 29, 2015

gl_Position must be in Normalized Device Coordinate space. So your approach only works because, in addition to the omission of the projection matrix, the PlaneBufferGeometry is 2 X 2 and centered at the origin.

Should I explain the above points at comments in webgl_raymarching_reflect.html to avoid confusing to users?

@WestLangley

This comment has been minimized.

Collaborator

WestLangley commented Dec 29, 2015

My preference would be to use an orthographic camera. THREE.Camera() was not intended to be used directly -- at least that was my understanding. But since what you have implemented works, I'll leave it up to @mrdoob to decide.

I am not sure it makes sense to pass the camera "position".

@mrdoob

This comment has been minimized.

Owner

mrdoob commented Dec 29, 2015

I am not sure it makes sense to pass the camera "position".

The idea was to pass a camera into the shader, so the three world is more integrated with the raymarcher world. Ideally we could pass camera.matrixWorld and camera.projectionMatrix and decompose inside the shader.

@WestLangley

This comment has been minimized.

Collaborator

WestLangley commented Dec 29, 2015

Thing is, there are no objects in the scene. This is just a full-screen quad with a shader rendererd on it.

I do not feel strongly about this, but the whole thing to me is strange -- now that I think about it.

@mrdoob

This comment has been minimized.

Owner

mrdoob commented Dec 29, 2015

Yes, but imagine that we wanted to animate the camera. We have a lot of code for animating stuff now. We can animate the camera outside instead of replicating animation code inside the shader.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment