Sign in to follow this  
Sailarg

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

Recommended Posts

 

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.

 

Share this post


Link to post
Share on other sites

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 

 

 

 

 

Share this post


Link to post
Share on other sites
15 hours ago, NasimiAsl said:

 

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!!!!

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.