# Creating a quad texture with shaders

**URL:** <https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822>\
**Category:** Questions\
**Tags:** buffergeometry, quads, textures, fragment-shader, shaders\
**Created:** [January 21, 2019, 7:57pm UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822 "2019-01-21T19:57:22Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![Wedad\_Anbtawi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wedad_anbtawi/32/5864_2.png) [@Wedad\_Anbtawi](https://discourse.threejs.org/u/Wedad_Anbtawi)\
**Post date:** [January 21, 2019, 7:57pm UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/1 "2019-01-21T19:57:22Z")

</div>

Hello, I need to create a quad texture of around 99pixels which I want to color each pixel in the fragment shader.

The code:

var geometry = new THREE.BufferGeometry();  
var colors = new Float32Array(99 \* 4);  
for (j = 0; j \< 1; j++) {  
for (i = 1; i \< 100; i++) {  
const id = (i-1) \* 4;  
colors[id + 0] = tStudent;  
colors[id + 1] = tStudent \* tStudent \* x;  
colors[id + 2] = tStudent \* tStudent \* y;  
colors[id + 3] = 1;  
}  
}  
console.log(colors);  
geometry.addAttribute( ‘color’, new THREE.BufferAttribute( colors, 4 ) );  
uniforms = {  
time: { type: “f”, value: 1.0 }  
};  
material = new THREE.ShaderMaterial( {  
uniforms: uniforms,  
vertexShader: document.getElementById( ‘vertexShader’ ).textContent,  
fragmentShader: document.getElementById( ‘fragmentShader’ ).textContent  
});  
mesh = new THREE.Mesh( geometry, material );  
scene.add( mesh );

The shaders are as follows:

```
<script id="vertexShader" type="x-shader/x-vertex">
	uniform float time;
	attribute vec4 color;
	varying vec4 vColor;
	void main()	{
		vColor = color;
		gl_Position = vec4( position, 1.0 );
	}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
	uniform float time;
	varying vec4 vColor;
	void main()	{
		vec4 color = vec4( vColor );
		gl_FragColor = vec4(0,255,0,1);
	}

```

I got a black screen without any output. Any help please?

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [January 21, 2019, 9:00pm UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/2 "2019-01-21T21:00:11Z")

</div>

Hard to tell why you’re getting a black screen without more details. Where’s your render loop? Do you get any console errors? Are you getting shader compilation errors? I can tell you off the bat, your line `gl_FragColor = vec4(0,255,0,1);` won’t work, because you need to use floats, not integers. Try using `gl_FragColor = vec4(0.0, 255.0, 0.0, 1.0);` instead.

---

<div class="post-metadata">

**Author:** ![prisoner849](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/prisoner849/32/535_2.png) [@prisoner849](https://discourse.threejs.org/u/prisoner849)\
**Post date:** [January 21, 2019, 10:08pm UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/3 "2019-01-21T22:08:50Z")

</div>

> [@marquizzo](#):
>
> `gl_FragColor = vec4(0,255,0,1);`

Just tried it on [shadertoy.com](http://shadertoy.com) and [glslsandbox.com](http://glslsandbox.com), works as expected.

@Wedad_Anbtawi  
Could you provide a working live code example? codepen, jsfiddle or github repo?

---

<div class="post-metadata">

**Author:** ![marquizzo](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/marquizzo/32/25192_2.png) [@marquizzo](https://discourse.threejs.org/u/marquizzo)\
**Post date:** [January 21, 2019, 11:08pm UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/4 "2019-01-21T23:08:39Z")

</div>

Oh, wow you’re right! My shaders have always given me the error:

> `cannot convert from 'const int' to 'highp float'`

when I assign an integer to a float variable. But it looks like gl\_FragColor can also handle integers in the [0, 255] range… Guess I learned something new today!

---

<div class="post-metadata">

**Author:** ![Wedad\_Anbtawi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wedad_anbtawi/32/5864_2.png) [@Wedad\_Anbtawi](https://discourse.threejs.org/u/Wedad_Anbtawi)\
**Post date:** [January 22, 2019, 3:53am UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/5 "2019-01-22T03:53:03Z")

</div>

The examples are advanced like [https://threejs.org/examples/#webgl\_buffergeometry\_rawshader](https://threejs.org/examples/#webgl_buffergeometry_rawshader)  
I only need a plane of 99 pixels each will be assigned color from the attribute value. I think the position is wrong but not sure.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [January 22, 2019, 5:28am UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/6 "2019-01-22T05:28:58Z")

</div>

Where is your position attribute?

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [January 22, 2019, 5:29am UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/7 "2019-01-22T05:29:43Z")

</div>

I don’t think that `gl_Position = vec4(position,1.);` is doing anything since you don’t have anything in position.  
Apply your `ShaderMaterial` to

```auto
new PlaneBufferGeometry(2,2,1,1)

```

Double yu tee F on the int in `gl_FragColor` i learned something today! But how is alpha treated, is 1 basically 1/255?

---

<div class="post-metadata">

**Author:** ![Wedad\_Anbtawi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wedad_anbtawi/32/5864_2.png) [@Wedad\_Anbtawi](https://discourse.threejs.org/u/Wedad_Anbtawi)\
**Post date:** [January 22, 2019, 6:22am UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/8 "2019-01-22T06:22:04Z")

</div>

> [@pailhead](#):
>
> new PlaneBufferGeometry(2,2,1,1)

Thank you! it worked! do you have any idea on how to set the number of pixels on the geometry? Like if I need only 100\*100 pixels

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [January 22, 2019, 6:27am UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/9 "2019-01-22T06:27:51Z")

</div>

You don’t do it like that. On the geometry you could perhaps arrange a grid of points and then render it as `THREE.Points` but i think it would be tricky.

What would be better i think, is to make an attribute on the geometry that looks up the texture.  
One of these:

```auto
attribute float aIndex;
attribute vec2 aIndex;

```

---

<div class="post-metadata">

**Author:** ![Wedad\_Anbtawi](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/wedad_anbtawi/32/5864_2.png) [@Wedad\_Anbtawi](https://discourse.threejs.org/u/Wedad_Anbtawi)\
**Post date:** [January 22, 2019, 6:42am UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/10 "2019-01-22T06:42:32Z")

</div>

I didn’t get you.

What I need is to have two textures, each with 100\*100 pixels whose color will be passed as attribute, then apply blender to both textures to get the mixed color per pixel. I also should get the color of each pixel. I’m new to Three.js so I’m not sure if this is applicable.

---

<div class="post-metadata">

**Author:** ![pailhead](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/pailhead/32/85_2.png) [@pailhead](https://discourse.threejs.org/u/pailhead)\
**Post date:** [January 22, 2019, 4:48pm UTC](https://discourse.threejs.org/t/creating-a-quad-texture-with-shaders/5822/11 "2019-01-22T16:48:47Z")

</div>

I don’t understand what you are trying to do: