Jump to content

Help for playground : need add shader and 2 js file to hader


Recommended Posts

hi i need have this changes in playground how can make it ?




<!DOCTYPE html>


<html lang="en">


    <meta charset="utf-8" />

    <title>Eash Preview</title>

    <script src="Scripts/babylon.js"></script>

    <script src="Scripts/Eash.js"></script>

    <script src="Scripts/Eash.Basic.js"></script>



        html, body {

            overflow: hidden;

            width: 100%;

            height: 100%;

            margin: 0;

            padding: 0;



        #renderCanvas {

            width: 100%;

            height: 100%;

            touch-action: none;



        .hdn {

            display: none;





    <canvas id="renderCanvas"></canvas>

    <div id="shaders" class="hdn"></div>


        var canvas = document.getElementById("renderCanvas");

        var engine = new BABYLON.Engine(canvas, true);

        var camera;

        var createScene = function () {


            // This creates a basic Babylon Scene object (non-mesh)

            var scene = new BABYLON.Scene(engine);


            // This creates and positions a free camera (non-mesh)

            camera = new BABYLON.FreeCamera("camera1", new BABYLON.Vector3(0, 5, -10), scene);


            // This targets the camera to scene origin



            // This attaches the camera to the canvas

            camera.attachControl(canvas, true);


            // This creates a light, aiming 0,1,0 - to the sky (non-mesh)

            var light = new BABYLON.HemisphericLight("light1", new BABYLON.Vector3(0, 1, 0), scene);


            // Default intensity is 1. Let's dim the light a small amount

            light.intensity = 0.7;


            // Our built-in 'sphere' shape. Params: name, subdivs, size, scene

            var sphere = BABYLON.Mesh.CreateSphere("sphere1", 16, 2, scene);

            sphere.material =eash.shader( eash.range({

                mat1:eash.map({ ref1: '/images/s.jpg' ,t1:'time*0.002'}),





                + eash.alpha()+eash.back(eash.discard)  , scene);

            // Move the sphere upward 1/2 its height

            sphere.position.y = 1;


            // Our built-in 'ground' shape. Params: name, width, depth, subdivs, scene

            var ground = BABYLON.Mesh.CreateGround("ground1", 6, 6, 2, scene);


            return scene;




        var scene = createScene();

        time = 0;

        engine.runRenderLoop(function () {


            for (ms in scene.meshes) {

                var it = scene.meshes[ms];

                if (def(it.material)) {

                    it.material.setVector2("screen", { x: canvas.width, y: canvas.height });

                    it.material.setVector2("mouse", { x: 0, y: 0 });

                    it.material.setVector3("camera", camera.position);

                    it.material.setFloat("time", time++);








        // Resize

        window.addEventListener("resize", function () {







Link to comment
Share on other sites

haha.  You discovered my undercover operations, Deltakosh.  I wasn't sure what NasimiAsl was asking, but it sounded like he/she was in need of ShadersStore magic.  (I learned about ShadersStore from downloaded CYOS "get ZIP" files and from Deltakosh's particle effects demo.)

Yep, I was caught red-handed trying to introduce NasimiAsl to ShadersStore, yet not look foolish if that wasn't applicable to NasimiAsl's issue.  Pretty funny, eh?  I'm such a wuss!

NasimiAsl has been producing some AMAZING stuff, recently... especially shader stuff.  Complicated, bleeding-edge, high-tech good stuff!  I didn't want to look foolish in front of him/her.  So, I hid in my foxhole... behind the Christmas tinsel, and I tossed a piece of fruit cake onto the snow in front of NasimiAsl.  hehe

Thanks for the assist, Deltakosh!  You pointed NasimiAsl toward the piece of fruit cake that I tossed.  :D

Folks, let it be known that it was Deltakosh and/or the core framework coders... that invented the ShadersStore feature... which is a very cool feature.

Want to see another cool way to store shader code?  I knew you did.  Here is the original "clouds demo"... a rare "stand-alone" demo from the fine folks at BabylonJS...  http://www.babylonjs.com/Scenes/Clouds/index.html  (it is the same as the vertexData FEATURE demo on the main BJS website).

View its source code.  See that?  The vertex and fragment shaders are stored in HTML SCRIPT elements!  How cool is that?  There is some documentation about this... near the bottom of our procedural textures doc...  http://doc.babylonjs.com/tutorials/How_to_use_Procedural_Textures

Fun!  You might notice that ShadersStore is used in ZIP's of scenes from our CYOS shader editor/compiler.  I put a little butter on the fruitcake... for NasimiAsl, too, but I don't know if NasimiAsl ever reads The Wingnut Chronicles... so I didn't know if he/she saw my fruitcake toss.  heh.

Man, I love hanging-out in this forum!  It's just plain magical.  @dk, you might need a link fix in your post.  The forum ate your 2nd URL.

Link to comment
Share on other sites



1: thanks @Dk  i like your replay it help  


2: ShaderStore is simple array :D

   i want do this subject like playground  structure  not use ShaderStore because i want this source stay easy and understandable to all not just for perfetional users . so i think we can  stay in medium level and make easy code.


3. i think best way to use a array for use shader   is indexedDb and i write a simple for myself    and in this part just i wanna walk in babylonjs way and append a new good feature 


4. just for fun replace('she/he','he').replace('he/she','he') plz


5. next feature i think is build a  custom mathematical geometry only with mathematical ;) i have wall builder and surface builder and i test it but have problem with uv i think after eash (easy shader ) i share that 


thanks wingnut 

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.

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.


  • Recently Browsing   0 members

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