CODEWITHSUNDEEP
shaderwebglthree.js
three.jsaddict
three.jsaddict

Reputation: 305

Custom Shader program rendering "N" number of cubes on canvas using Three.js?

<html lang="en">
    <head>
        <title>Three.js </title>
        <meta charset="utf-8">
        <script src="resources/three.min.js"></script>
        <script src="resources/stats.min.js"></script>
        <script src="resources/Detector.js"></script>
        <script id="vshader" type="x-shader/x-vertex" >
            #ifdef GL_ES                                
                precision highp float;                      
            #endif

            uniform mat4 worldviewproj;

            attribute vec4 vPosition;
            attribute vec4 vNormal;
            attribute vec2 vTexCoord1;

            varying vec2 v_texCoord;

            void main() {
                gl_Position = worldviewproj * vPosition;
                v_texCoord = vTexCoord1.st;
            }
        </script>
        <script id="fshader" type="x-shader/x-fragment">
            #ifdef GL_ES
                precision highp float;
            #endif

            uniform sampler2D uSampler;

            varying vec2 v_texCoord;

            varying vec3 vLightWeighting;

            void main() {
                vec4 textureColor = texture2D(uSampler, vec2(v_texCoord.s, v_texCoord.t));
                gl_FragColor = textureColor;
            }   
        </script>
    <script>
            if ( ! Detector.webgl ) Detector.addGetWebGLMessage();
            var container, stats;
            var camera, scene, renderer;
            var scale = 100, N=1000;
            var arr= [];
            var width = 720, height = 405;
            var uniforms, material;
            start =function()
            {
            init();
            animate();
            };      

            function init() 
            {

                container = document.createElement( 'div' );
                document.body.appendChild( container );

                camera = new THREE.PerspectiveCamera( 45, width / height, 0.1, 10000 );
                camera.position.x = 0;
                camera.position.y = 0;
                camera.position.z = 80;
                //camera.lookAt( new THREE.Vector3( scale/2, scale/2, scale/2 ) );

                scene = new THREE.Scene();

                renderer = new THREE.CanvasRenderer();
                renderer.setClearColor(new THREE.Color(0x000000));
                renderer.setSize( width, height );

                container.appendChild( renderer.domElement );

                uniforms = {
                        uSampler: { type: "t", value: THREE.ImageUtils.loadTexture( "resources/crate.jpg" ) }
                };

                var geometry = new THREE.CubeGeometry( 1, 1, 1 );

                //material = new THREE.MeshBasicMaterial( { map: THREE.ImageUtils.loadTexture("resources/crate.jpg")} );

                material = new THREE.ShaderMaterial( {

                    uniforms: uniforms,
                    vertexShader: document.getElementById( 'vshader' ).innerHTML,
                    fragmentShader: document.getElementById( 'fshader' ).innerHTML

                } );

                for ( var i = 0; i <= N; i++)
                {
                    arr.push(new THREE.Mesh( geometry, material ));
                    arr[i].position.set( (Math.random()-0.5) * scale, (Math.random()-0.5) * scale, (Math.random()-0.5) * scale ); 
                    scene.add( arr[i] );

                }


                stats = new Stats();
                stats.domElement.style.position = 'absolute';
                stats.domElement.style.bottom = '1px';
                container.appendChild( stats.domElement );              

                document.getElementById('3dobjects').innerHTML = "The number of Cube Objects: " +N;


            }

            function animate() 
            {
                requestAnimationFrame( animate );
                render();
                stats.update();

            }

            function render() 
            {               
                renderer.render( scene, camera );

            }

        </script>
    </head>    
<body onload="start()">
    <label id="3dobjects">test</label>
</body>
</html>

Prior to custom shader program, I used default THREE.MeshBasicMaterial ({Texture Source}), I've my output. but after I used this custom shader program, I couldn't get my result. I don't know where exactly my problem persists in the above code. I have been kept trying all sorts of ways, i could. But No desired result. Any Idea or Help please..

Upvotes: 0

Views: 336

Answers (2)

Gero3
Gero3

Reputation: 2887

    varying vec2 v_texCoord;

    void main() {
        vec4 mvPosition = modelViewMatrix * vec4( position, 1.0 );
        gl_Position = projectionMatrix * mvPosition;
        v_texCoord = uv;
    }

This should be your vertexshader.

Upvotes: 1

Tapio
Tapio

Reputation: 3456

You are using THREE.CanvasRenderer, which does not support custom shaders, among other things. Try THREE.WebGLRenderer.

In addition, you are not setting the worldviewproj uniform, nor those attributes, which don't use standard Three.js names.

Upvotes: 1

Related Questions