Author Topic: How to create the reflection effection?  (Read 6735 times)

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
How to create the reflection effection?
« on: May 15, 2015, 10:20:56 am »
Hellow, I want to create the reflection effect,  I use the setEnvmapped but no effect.  This effect maybe use the shader to performace, but I don't know how to write this and this may diffcult to me now ;), Could someone help me to give a sample shader to performace this effect, Thanks a lot!

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #1 on: May 15, 2015, 09:22:07 pm »
Spherical environment mapping is actually pretty simple to do. You take some shader and set the texture coordinates in the vertex shader based on the vertex normal like so:

Code: [Select]
vec4 vNormi = normalize(modelViewMatrix * vec4(normal, 0.0));
texCoord = vNormi.xz;

If it helps, I can post a shader that I'm using for the gold nuggets in my game, but it's a little tailored to how the game handles light in dungeons, so I'm not sure if it helps more then it causes confusion.

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #2 on: May 16, 2015, 02:25:59 am »
Hi Egon, I need it,Thanks a lot ! :)

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #3 on: May 16, 2015, 08:58:56 pm »
Ok, so here you go. It's basically a modified default shader from jPCT-AE which skips the first light source (i.e. it starts with 1, not 0), because the 0 light source is used for another purpose in my dungeon rendering. The shader uses two texture stages. One for the environment mapping and one for the base texture. Anyway...

Vertex shader:
Code: [Select]
uniform mat4 modelViewMatrix;
uniform mat4 modelViewProjectionMatrix;

uniform vec4 additionalColor;
uniform vec4 ambientColor;

uniform int lightCount;

uniform vec3 lightPositions[8];
uniform vec3 diffuseColors[8];

uniform float fader;
uniform float fogDistance;

uniform float alpha;

attribute vec4 position;
attribute vec3 normal;
attribute vec4 tangent;
attribute vec2 texture0;
attribute vec2 texture1;

varying vec2 texCoord;
varying vec2 texCoord1;
varying vec4 vertexColor;
varying float fogWeight;

void main(void)
{
vec4 vNormi = normalize(modelViewMatrix * vec4(normal, 0.0));
texCoord = vNormi.xz;
texCoord1=texture0;
vec3 vVertex = vec3(modelViewMatrix * position);
vertexColor=vec4(0,0,0,alpha);

if (lightCount>1) {
vec3 normalEye   = normalize(modelViewMatrix * vec4(normal, 0.0)).xyz;
vec3 tmpVec = lightPositions[1] - vVertex;

float angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[1] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}

if (lightCount>2) {
tmpVec = lightPositions[2] - vVertex;
angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[2] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}

if (lightCount>3) {
tmpVec = lightPositions[3] - vVertex;
angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[3] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}

if (lightCount>4) {
tmpVec = lightPositions[4] - vVertex;
angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[4] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}

if (lightCount>5) {
tmpVec = lightPositions[5] - vVertex;
angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[5] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}

if (lightCount>6) {
tmpVec = lightPositions[6] - vVertex;
angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[6] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}

if (lightCount>7) {
tmpVec = lightPositions[7] - vVertex;
angle = dot(normalEye, normalize(tmpVec));

if (angle > 0.0) {
vertexColor += vec4(diffuseColors[7] * (angle * (1.0- (min(fader, length(tmpVec)+0.1)/fader))), 0);
}
}
}
}
}
}
}
}

fogWeight = 1.0-clamp((-vVertex.z - (fogDistance-280.0)) / (280.0), 0.0, 1.0);
gl_Position = modelViewProjectionMatrix * position;
}

Fragment shader:
Code: [Select]
precision highp float;

varying vec2 texCoord;
varying vec2 texCoord1;
varying vec4 vertexColor;
varying float fogWeight;

uniform sampler2D textureUnit0;
uniform sampler2D textureUnit1;

void main ()
{
gl_FragColor = vertexColor*((texture2D(textureUnit0, texCoord1)+texture2D(textureUnit1, texCoord) ) * fogWeight);
}

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #4 on: May 17, 2015, 11:12:50 am »
Thank you ! I will try it .    another question,  If  I want to pass  my   texture  to shader , how can I do this?  (not the textureUnit0 ~ textureUnit3)

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #5 on: May 17, 2015, 01:27:50 pm »
I'm note sure what you mean... ???

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #6 on: May 17, 2015, 02:16:15 pm »
Sorry for my  poor english,   jpct-ae can inject data to textureUnit0,textureUnit1...textureUnit3, the value in shader, I means can I do this for my custom uniform texture in shader , e.g  uniform  mytexture

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #7 on: May 17, 2015, 02:41:07 pm »
You don't. The texture units will be injected automatically. 0 represents the first texture stage, 1 the second etc. All you do is to assign your textures to your objects (look at TextureInfo for multiple textures stages on one object).

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #8 on: May 18, 2015, 11:42:36 am »
If I want to use a cube  box texture as environment , How to  do that  by jpct-ae? (shader like textureCube(environmentCubemap, reflectDir)...)

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #9 on: May 18, 2015, 12:31:35 pm »
That would require cube mapping support, which isn't supported ATM.

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #10 on: May 18, 2015, 02:54:36 pm »
Ok , maybe suport in feature...   another question , I found the gl2.0 slow than gl1.0 on some old device ,  why ?

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #11 on: May 18, 2015, 03:30:04 pm »
Because it has to use shaders for everything where ES 1.x uses the fixed function pipeline, which might be faster on some older devices.

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #12 on: May 19, 2015, 12:49:22 pm »
Thanks !    Could shader can perfomace the car light ? like the attached picture  ,  If can , Could you give  me a  sample shader   Thank you very much !    Or maybe there are another simple way to performace this effect ,  I have no idea...
« Last Edit: May 19, 2015, 03:41:37 pm by gamenewer »

Offline gamenewer

  • long
  • ***
  • Posts: 171
    • View Profile
Re: How to create the reflection effection?
« Reply #13 on: May 21, 2015, 04:22:49 am »
Hi Egon, How to do the car light effect?   any idea or sugestion, thank you !

Offline EgonOlsen

  • Administrator
  • quad
  • *****
  • Posts: 12295
    • View Profile
    • http://www.jpct.net
Re: How to create the reflection effection?
« Reply #14 on: May 21, 2015, 10:49:12 am »
You could create the light cone as a kind of simple object, texture it with a fading light texture and render it as a transparent object with additive blending.