Jump to content
GameMonetize.com © The leading broker of high quality cross-platform HTML5 games ×

¿how can I make two shaders in the same object?

Sailarg

By Sailarg,
in Questions & Answers

 Share

Recommended Posts

Sailarg Newbie

Sailarg

Posted
Posted

 

Good evening, I was watching the tutorials and I was curious what can be done with the shaders, I managed to do some things, however now I have a lot of questions,
 

1. What is the difference between using BABYLON.Effect.ShadersStore, BABYLON.PostProcess, and BABYLON.ShaderMaterial ?


2. how can apply 2 effects to the same object.?  for example I am trying to make a 360 degree view with the wave effect that is in http://cyos.babylonjs.com/

here is my test code

Basic Html 

<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>360 + wave</title>
	<script src="https://www.babylonjs.com/hand.minified-1.2.js"></script>
	<script src="https://preview.babylonjs.com/cannon.js"></script>
	<script src="https://preview.babylonjs.com/oimo.js"></script>
	<script src="https://preview.babylonjs.com/babylon.js"></script>
	<script src="main.js"></script>
    <style>
        html, body {
            width: 100%;
            height: 100%;
            padding: 0;
            margin: 0;
            overflow: hidden;
            margin: 0px;
            overflow: hidden;
        }

        #renderCanvas {
            width: 100%;
            height: 100%;
            touch-action: none;
            -ms-touch-action: none;
        }
    </style>
</head>
<body>
    <canvas id="renderCanvas"></canvas>
</body>
</html>

main JS

  

"use strict";

function create360(sphere, scene)
{
	var sphereMaterial = new BABYLON.StandardMaterial("world", scene);
    sphereMaterial.emissiveTexture  = new BABYLON.Texture("world.jpg", scene);
	sphereMaterial.emissiveTexture.uScale = -1.0;
	sphereMaterial.emissiveTexture.vScale = -1.0;
	sphereMaterial.emissiveTexture.hasAlpha = false;
	sphereMaterial.backFaceCulling = false;
	sphere.material = sphereMaterial;
	sphere.scaling.x = 1000;
	sphere.scaling.y = 1000;
	sphere.scaling.z = 1000;
}

function startGame() {
    if (BABYLON.Engine.isSupported()) {
        var canvas = document.getElementById("renderCanvas");
        var engine = new BABYLON.Engine(canvas, false);
		var scene = new BABYLON.Scene(engine);
		scene.collisionsEnabled = true;
		var camera = new BABYLON.ArcRotateCamera("camera1",Math.PI/2, Math.PI/2, 90, new BABYLON.Vector3(0, 0, 0), scene);
		camera.checkCollisions = true;
		camera.attachControl(canvas);

		var sphere = BABYLON.Mesh.CreateSphere("Sphere", 16, 10, scene);
		sphere.checkCollisions = true;
		create360(sphere, scene);

                BABYLON.Effect.ShadersStore["customVertexShader"]=                "precision highp float;\r\n"+

                "// Attributes\r\n"+
                "attribute vec3 position;\r\n"+
                "attribute vec3 normal;\r\n"+
                "attribute vec2 uv;\r\n"+

                "// Uniforms\r\n"+
                "uniform mat4 worldViewProjection;\r\n"+
                "uniform float time;\r\n"+

                "// Varying\r\n"+
                "varying vec3 vPosition;\r\n"+
                "varying vec3 vNormal;\r\n"+
                "varying vec2 vUV;\r\n"+

                "void main(void) {\r\n"+
                "    vec3 v = position;\r\n"+
                "    v.x += sin(2.0 * position.y + (time)) * 0.5;\r\n"+
                "    \r\n"+
                "    gl_Position = worldViewProjection * vec4(v, 1.0);\r\n"+
                "    \r\n"+
                "    vPosition = position;\r\n"+
                "    vNormal = normal;\r\n"+
                "    vUV = uv;\r\n"+
                "}\r\n";

                BABYLON.Effect.ShadersStore["customFragmentShader"]=                "precision highp float;\r\n"+

                "// Varying\r\n"+
                "varying vec3 vPosition;\r\n"+
                "varying vec3 vNormal;\r\n"+
                "varying vec2 vUV;\r\n"+

                "// Uniforms\r\n"+
                "uniform mat4 world;\r\n"+

                "// Refs\r\n"+
                "uniform vec3 cameraPosition;\r\n"+
                "uniform sampler2D textureSampler;\r\n"+

                "void main(void) {\r\n"+
                "    vec3 vLightPosition = vec3(0,20,10);\r\n"+
                "    \r\n"+
                "    // World values\r\n"+
                "    vec3 vPositionW = vec3(world * vec4(vPosition, 1.0));\r\n"+
                "    vec3 vNormalW = normalize(vec3(world * vec4(vNormal, 0.0)));\r\n"+
                "    vec3 viewDirectionW = normalize(cameraPosition - vPositionW);\r\n"+
                "    \r\n"+
                "    // Light\r\n"+
                "    vec3 lightVectorW = normalize(vLightPosition - vPositionW);\r\n"+
                "    vec3 color = texture2D(textureSampler, vUV).rgb;\r\n"+
                "    \r\n"+
                "    // diffuse\r\n"+
                "    float ndl = max(0., dot(vNormalW, lightVectorW));\r\n"+
                "    \r\n"+
                "    // Specular\r\n"+
                "    vec3 angleW = normalize(viewDirectionW + lightVectorW);\r\n"+
                "    float specComp = max(0., dot(vNormalW, angleW));\r\n"+
                "    specComp = pow(specComp, max(1., 64.)) * 2.;\r\n"+
                "    \r\n"+
                "    gl_FragColor = vec4(color * ndl + vec3(specComp), 1.);\r\n"+
                "}\r\n";


                // Compile
                var shaderMaterial = new BABYLON.ShaderMaterial("shader", scene, {
                    vertex: "custom",
                    fragment: "custom",
                },
                    {
                        attributes: ["position", "normal", "uv"],
                        uniforms: ["world", "worldView", "worldViewProjection", "view", "projection"]
                    });

                var refTexture = new BABYLON.Texture("world.jpg", scene);
                refTexture.wrapU = BABYLON.Texture.CLAMP_ADDRESSMODE;
                refTexture.wrapV = BABYLON.Texture.CLAMP_ADDRESSMODE;

                var mainTexture = new BABYLON.Texture("world.jpg", scene);

                shaderMaterial.setTexture("textureSampler", mainTexture);
                shaderMaterial.setTexture("refSampler", refTexture);
                shaderMaterial.setFloat("time", 0);
                shaderMaterial.setVector3("cameraPosition", BABYLON.Vector3.Zero());
                shaderMaterial.backFaceCulling = false;

                sphere.material = shaderMaterial;

            var time = 0;
            engine.runRenderLoop(function () {
                var shaderMaterial = scene.getMaterialByName("shader");
                shaderMaterial.setFloat("time", time);
                time += 0.02;

                shaderMaterial.setVector3("cameraPosition", scene.activeCamera.position);

                scene.render();
            });
    }
};

document.addEventListener("DOMContentLoaded", startGame, false);

 

 

I know that in doing this sphere.material = shaderMaterial; I'm over writing the field 360 so try to make the sphere first, render and then apply wave effect, but nothing, some suggestion or example of how to do this?
 

what I really want to do for practice is skydome with the fisheye effect in the camera, that is, everywhere I look goes with that effect in 360 degrees

Finally I'm new to this so I'm sorry if the question seems silly.

 

Link to comment
Share on other sites
NasimiAsl Newbie

NasimiAsl

Posted
Posted

1.  ShaderStore

All material for any mesh need a shader,  babylonJs keep shaders in ShaderStore ( standard material , shader Material and all others shaders )

so when you make shader form shaderMaterial that collect in ShaderStore automaticly

but postprocess is shader not for mesh

that can change rendered result ( post process = process after rendered )

you haven't access mesh data in post process you can just access screen pixels 

 

2. for change mesh progress you shoud change  vertex shader ( for mesh not in PostProcess )

you can change any effect in one vertex shader 

 and for add effect for last rendered result you can add it in post process

 

example : ( startup )  

 http://www.babylonjs-playground.com/#DMEACA#2 change color by fragmentShader

http://www.babylonjs-playground.com/#DMEACA#3  wave 

 

 

 

 

Link to comment
Share on other sites
Sailarg Newbie

Sailarg

Posted
  • Author
Posted
15 hours ago, NasimiAsl said:

http://www.babylonjs-playground.com/#ILD6VF#3

in progress

 

hey looks great, and seeing as you did gave me other ideas on how to work, on the other hand have more documentation on the shaderBuilder? is that I saw that you used several things that are not in the documentation (or at least I did not get them)

 

Quote

1.  ShaderStore

All material for any mesh need a shader,  babylonJs keep shaders in ShaderStore ( standard material , shader Material and all others shaders )

so when you make shader form shaderMaterial that collect in ShaderStore automaticly

but postprocess is shader not for mesh

that can change rendered result ( post process = process after rendered )

you haven't access mesh data in post process you can just access screen pixels 

 

2. for change mesh progress you shoud change  vertex shader ( for mesh not in PostProcess )

you can change any effect in one vertex shader 

 and for add effect for last rendered result you can add it in post process

 

example : ( startup )  

 http://www.babylonjs-playground.com/#DMEACA#2 change color by fragmentShader

http://www.babylonjs-playground.com/#DMEACA#3  wave 

And this also helps me to better understand the shaders in babylonjs 

Thank you very much for taking the time to answer my doubts and to make that example!!!!

Link to comment
Share on other sites
Sailarg Newbie

Sailarg

Posted
  • Author
Posted
8 hours ago, NasimiAsl said:

@Sailarg thanks

look this : http://cdn.rawgit.com/RNasimiAsl/Extensions/master/ShaderBuilder/Documentation/ShaderBuilderReferences.html

and you you most search too but i working on shaderBuilder Tools to make material from wizard

i am alone so maybe that take more time but i work on it so hard :) 

 

 

Good day, you know that I look exactly in that repository and every page link that opened I returned a 404: Not Found 

and also saw other post like this: 

and others more.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
 Share
Go to topic listing

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...