Search the Community

Hello guys, I am a frontend developer that trynna make my own game on Pixi 8 so I know nothing about game developing and rendering with WebGL in general. Now I have a static game demo with no animations. My game just has a constructor that creates a character from vector sprites and uses some masks and geometries to color different parts of the a character. In this case coloring works fine with just static geometries and masks but I want to add some animations and as I figured out by researching info, I need to use custom filters with my own shaders to color animated sprite and apply textures with some patterns. BUT, as I said I know nothing about creating and using shaders. I've tried to make some with ChatGPT help, but just got infinite erros which I don't know how to fix and what even these errors mean. So can you guys help me out by sharing some info about using shaders in Pixi or how to write shaders in general. I've found this guide https://webglfundamentals.org/ about WebGL but it's too difficult to me to understand and figure out how to solve my problem just by myself. And if someone can create shaders, please share just a simple shaders that apply texture on an animated sprite. Appreciate for every help.

Dear Community, Thank you very much for the magnificent project! Currently, I am trying to create a filter which is based on a shader ""Godrays" by alaingalvan", but the one which only lightens a certain area where "lights" exist on a transparent stage. The current version creates dark places ('0x000000') where the "lights" are not shown, but the darkness must not surpass the background ('0x333333' or '0xffffff' as in CSS), so it would look like a transparent filter in the result. This is the incorrect behavior since it creates black background where the "lights" are (it is correct that it affects the background): ~ Is it even possible using this filter/shader? Is it correct that the issue is in the color matrix ("float noise(in vec3 p)")? Would it be correct to somehow base a pixel color on the source and only increase its "gain" instead? I will highly appreciate any suggestion! Best and kind regards

Hi, when I set mesh.drawMode = PIXI.DRAW_MODES.POINTS, If I use TextureCoord for the coord, the texture is pixelated but with fragCoord.xy / Resolution.xy it's ok in the shader. what's the reason ?

Hi, I am making a Lighting filter for PIXIJS 4 in RPGmaker MV but I've encountered some strange behavior regarding Render Textures. for some strange reason, rendering the scene to a render textures causes the position of the lights to mirror on the Y axis and I have no idea why. here are some photo's of what i mean. Below is a Screenshot of the scene in real time. and this is the resulting render Texture. As you can see, the blue light close to thew center barely moved, while the yellow one moved from the bottom of the screen to the top. neither lights changed in X-axis values. the lights themselves do not move, this only appears in the render texture. the render texture is generated using this code on one of the RPGmaker Events script call, however the effect seems to be affecting all PIXI render textures, including those used by the default engine. here is the code the generate the render texture an make a sprite. the sprite is rendered to the scene. rt = PIXI.RenderTexture.create(1280,720); renderer = Graphics._renderer; renderer.render(SceneManager._scene, rt); sprt = new PIXI.Sprite(rt); SceneManager._scene.addChild(sprt); At first I thought it may have to do with Transformation Matricies within the shader. As far as i know I couln't find anything obvious. here's a test shader I prepared below below. varying vec2 vTextureCoord; uniform sampler2D uSampler; vec4 lightDiffuse(vec2 lposition,vec4 ldiffuse,float lquadratic,float llinear){ float distance=length(lposition-gl_FragCoord.xy); float attenuation=1./(1.+llinear* distance+ lquadratic*(distance*distance)); return ldiffuse*attenuation; } void main(){ vec4 result=vec4(0.,0.,0.,0.); vec4 ambience=vec4(.1,.1,.1,1.); //Hard coded light 2 vec2 lPositionA=vec2(720.,200.); vec4 lDiffuseA=vec4(0.,1.,1.,1.); //Hard coded light 1 vec2 lPositionB=vec2(100.,125.); vec4 lDiffuseB=vec4(1.,1.,0.,1.); result+=lightDiffuse(lPositionA,lDiffuseA,.07,.05); result+=lightDiffuse(lPositionB,lDiffuseB,.007,.005); gl_FragColor=vec4(ambience.rgb+result.rgb,1)*texture2D(uSampler,vTextureCoord); } I've also prepared a test plugin for RPG maker that will load said shader and apply it as a filter the the Scenes Spriteset. (essentially Container containing sprites and tile maps but no UI or system sprites). Even with those hard coded values, the issue still arises, hence why I though it may a matrix issue. The plugin loads the loads the shader on start up and stores globally, then when you enter a Map scene, the map sprite will also create a filter for itself that contains the shader code. I can provide a build if its necessary. The code looks for the shader in "/js/Shaders/". the Shaders folter doesnt normally exist in RPGmaker projects. var DSE = DSE || {}; DSE.Lighting = function (_export) { _export.shader = null; function loadShader(name, type) { var xhr = new XMLHttpRequest(); xhr.open('GET', '/js/Shaders/' + name + type); xhr.onreadystatechange = _onShaderLoad.bind(this, xhr, type); xhr.send(); } function _onShaderLoad(xhr, type) { console.log("shader loaded?"); if (type == ".frag") { _export.shader = xhr.responseText; } } loadShader("LightTest", ".frag"); /** * @override */ Spriteset_Map.prototype.createLowerLayer = function () { Spriteset_Base.prototype.createLowerLayer.call(this); this.createParallax(); this.createTilemap(); this.createCharacters(); this.createShadow(); this.createDestination(); this.createLightLayers(); this.createWeather(); }; Spriteset_Map.prototype.createLightLayers = function () { console.log(_export.shader); this._filters = [new PIXI.Filter('', _export.shader)]; }; return _export; }({}); upon using both of those files and the script call in a new project the result is the same. I've yet to look in the PIXI JS file itself , but i figured I'd start either the PIXI.Filter or Render texture classes. I'm not sure exactly how they work, but I hope its simple enough. I couldn't find anything on google about this nor on this forums aside from this: https://github.com/pixijs/pixijs/issues/2074 which upon reading seems to be an entirely different issue. Anyway , I'm posting this here, to make sure it isn't something silly I've done rather than a bug with PIXIJs. Any advice would be greatly appreciated.

Hello everyone, I have struggled all day long to create a simple filled circle using Shaders. I succeed creating triangle and square thanks to Pixi example. My approach is the following one : Creating a square and hide some pixels using discard in fragment. const geometry = new PIXI.Geometry().addAttribute("aVertexPosition", [100, 100, -100, 100, -100, -100, 100, -100, 200, 200], 2).addIndex([0, 1, 2, 0, 2, 3]); const shader = PIXI.Shader.from(` precision mediump float; attribute vec2 aVertexPosition; uniform mat3 translationMatrix; uniform mat3 projectionMatrix; void main() { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); } `, ` precision mediump float; uniform vec2 u_resolution; uniform vec2 u_mouse; uniform float u_time; void main() { vec2 coord = gl_FragCoord.xy; // vec2 st = gl_FragCoord.xy/u_resolution; // float pct = 0.0; // a. The DISTANCE from the pixel to the center // pct = distance(st,vec2(0.5,0.5)); // if (pct > RADIUS) discard; gl_FragColor = vec4(coord.x, coord.y, 1, 1); } `); const circle = new PIXI.Mesh(geometry, shader); circle.position.set(400, 300); app.stage.addChild(circle); Issues : - In my example, i'm just trying to display my square with differents colored depending on position => Why the square is still white ? coord.x seems to be very high (around 100000000000) leading the color to be always vec4(1, 1, 1, 1). - When calculating the distance, what is the center of the circle ? If someone already face this issue, a little help would be really appreciated. Thank you in advance. Have a good day.

I'm looking to generate a basic grid using a shader, and I've came across this Codepen which fits what I'm looking for. Only issue is: it's using Pixi v3, I've been looking into the documentation to port this code to work for a v5 filter, with no success so far. I'm still in the process of learning about shaders and filters, and the original code is already 2 versions outdated. Any help would be greatly appreciated. Cheers!

I have wrote my own mask fuction and I found a UV problem with shader const sprite = PIXI.Sprite.from(slottexture) const maskFrag = ` varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform sampler2D maskTexture; void main() { vec2 uv = fract( vTextureCoord ); vec4 originalColor = texture2D(uSampler, uv); vec4 maskColor = texture2D(maskTexture, uv); gl_FragColor = originalColor * maskColor.r; } ` const maskTexture = resources.mask.texture maskTexture.baseTexture.mipmap = false; const filter = new PIXI.Filter(null, maskFrag, { maskTexture: maskTexture, }); sprite.filters = [filter]; root.addChild(sprite); and it`s just render a quarter, I dont know why? and change the gl_FragColor = maskColor it`s still render a quarter, so I think it`s a uv problem!

Hello. I'm trying to make a filter to transition between the current texture of a Sprite and a new one. I've put together a barebones example here: https://www.pixiplayground.com/#/edit/KozVneSNjCuVZKi_fgNJa When you click on the blue sprite, a filter is applied. Currently, this filter takes a new texture as uniform and uses it to sample the fragment color (I have removed all the blending code to make it clearer). And it seems as this texture is being upscaled? Both textures have the same size. As a reference, I have added a second sprite with the new texture being applied. Thanx in advance!!!

Hi everyone, I have recently been learning to code and currently am creating a 2d game using PIXI v5. I want to implement some interactive shadows, based on different light points on the map(lights) or "above" the map(sunlight). I still have a lot to learn about Webgl and the insides of PIXI, and I got some questions about some different approaches. I noticed that there is a plugin, PIXI lights, but unfortunately it does not work with PIXI v5. On different forums and tutorials I encountered some shader ideas that create a shadow of particular objects. This works perfectly. However, when applied to my object container, it will render the container as a single texture and create shadows that are of course not in sync with the place of the objects itself, but will appear as a combined shadow of the total combination textures. I have also tried some shadowing through normal mapping, could work great as well, but if feel is mostly suitable for creating shadows for the terrain of the map. As far as i could tell, PIXI lights is using some form of flexible normal map rendering. Im curious what you all think is the best approach to create simple moving shadows for a container of display objects. some questions: I dont understand a lot about the batch renderer, and if that would be the right area to find a solution? I noticed some thing about a batch renderer that uses a %forloop% in the shader and 'uSamplers', could this be usefull to implement inside a shader to id the textures of the individual sprites which are inside the container? Would it even make a performance difference to use the shadow shader on every object in the container or using 1 shader? Would it be beneficial to put the shader inside a PIXI.program in that case? Im looking forward to hear your perspectives. Thank in advance

Hey! I'm trying to make calculations in a shader, and use all 4 channels, but unfortunately the alpha channel does not work as expected. I was thinking that if I will set gl.blendFunc(gl.ONE, gl.ZERO) then the output should be only just the source, without any blending, but it's not. So I have tried to combine it also with premultipling alpha (and keep gl.blendFunc(gl.ONE, gl.ZERO)), I get sort of closer results to the expected, but still behaviour is strange. In the demo below I'm just filling mesh with one color, and console.log values of the first pixel, was expecting [25, 178, 229, 25] but I got [255, 255, 255, 25] (without premultipled alpha) and [31, 184, 235, 25] (with premultipled alpha) https://www.pixiplayground.com/#/edit/785nGjqG5wSZoa9r2Xn7I Thank you in advance for a response!

Hi all, i've been messing with something for a couple days. I'm passing in a transparent blurred PNG to a shader, as well as a solid PNG background, and running it through a grayscale shader. If I simply display the pixels of the blurred PNG, it is output on top of the solid background as expected. The grayscale part of the shader works fine. However, the grayscale portion of the photo has a harsh transition to the background. It doesn't fade nicely and follow the alpha of the blurred PNG, like a blendMode would. I realize they are different things, but I feel like I am missing something obvious, and that it should work as I'm expecting. I have a playground setup to demonstrate the issue. Ignore the ugliness of the assets, it gets the point across better https://www.pixiplayground.com/#/edit/0ZaLP0UrUIPKfyHU_S3-o In the photo attached, the desired result is on the left (from Photoshop Color BlendMode). The right is the result from the playground. You can tell that the grayscale area on the right is much larger, since I believe that any alpha that is NOT 0, it being set to 1. I would like to try and maintain the alpha from the original blurred PNG. It may not seem like much but it really kills what I'm going for with the aliased edge like that. Thank you!

I have a `PIXI.Container()` I apply a shader/filter to using `container.filters = [filter]`. Documentations says, to remove a filter, just set `container.filters = null`. This works, but it's kind of a hard cut, when the image/sprite inside of the container is still visible, hence my question: Can I remove a filter with a kind of fade/transition?

Hey. I would like to know about drawCalls and their optimization. For example, there is an atlas, one of the pictures with additive blending mode. - Can we do it all in 1 drawCall. (If possible, explain why it is impossible and how it would be possible). The second question, is the developer Yggdrasil in his games uses sequence, an atlas filled with sequences. My developers said that the sequence in Pixi js is bad, and it is better not to use them because of optimization. But Yggdrasil normally uses them and is not afraid of it. Do they use webgl instances? with vertex shader? Can you tell me?

I'm trying to create a mesh that consists of a few dozen triangles that are going to change every frame (hopefully performs okay....) How do I actually do that though? Create mesh: const shader = Shader.from(vertexSrc, fragSrc) const geometry = new Geometry() .addAttribute('aVertexPosition', [initialVerts]) .addAttribute('aVertexColor', [initialColors]) const mesh = new Mesh(geometry, shader, null, DRAW_MODES.TRIANGLES) Attempt at changing aVertexPosition and aVertexColor each frame: mesh.geometry.addAttribute('aVertexPosition', newVertices) mesh.geometry.addAttribute('aVertexColor', newColors) Error: Cannot read property 'updateID' of undefined; originating from GeometrySystem.updateBuffers.

Hey, I'm trying to translate a very simple Shader from ThreeJs to PixiJs, but I'm struggling to figure out how I can convert this parameter to PixiJS: gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, sin(uTime*0.4 + (position.y) * vWave), 1.0 ); Here is the Example in ThreeJs: ( https://jsfiddle.net/Noturnoo/sn6q3pfk/5/ ) And here's my result in Pixi: ( https://jsfiddle.net/Noturnoo/d6pgmsk5/ ) Vertex in Three: uniform float uTime; uniform float waveLength; varying vec2 vUv; void main() { vUv = uv; lowp float vWave = sin((position.y) * waveLength); vec3 newPosition = position; gl_Position = projectionMatrix * modelViewMatrix * vec4( position.x, position.y, sin(uTime*0.4 + (position.y) * vWave), 1.0 ); } Vertex in PixiJS: attribute vec2 aVertexPosition; uniform float time; uniform float waveLength; uniform mat3 projectionMatrix; uniform mat3 translationMatrix; varying vec2 vTextureCoord; uniform vec4 inputSize; uniform vec4 outputFrame; void main(void) { vec2 position = aVertexPosition * max(outputFrame.zw, vec2(0.)) + outputFrame.xy; lowp float vWave = sin(time*0.1 + (position.y) * waveLength); //vWave = clamp(vWave, 0.6, 1.); gl_Position = vec4((projectionMatrix * vec3(position, 1.0)).xy, 0.0 , 1.0); vTextureCoord = aVertexPosition * (outputFrame.zw * inputSize.zw); gl_Position = vec4((projectionMatrix * vec3(position.x, position.y, 1.0)).xy, 0.0 , vWave); } Any idea how to solve it? Thanks in Advance.

In phaser 2, I applied to an image two filters to make a blurred image (Blur X and Blur Y, with the two of them a complete Blur). I wanted to use the same filter system to apply this two shaders, but I don't find the filter class anywhere. But I found the Pipeline system, so I combined both blurs and made this complete blur shader. Everything fine now. My questions are... There is some way to apply two pipelines in one image/sprite? and, There is an alternative for filters in phaser 3?

Hi guys! I'm trying to figure out how to apply some custom frag shader into a filter. The intented effect is a simple crt warp over a sprite. Here is what I got so far: https://jsfiddle.net/djq6kjx4/1/ but It should look something like the image in the attachment. As you can see from the example above the warp effect is mostly visible to one corner. Now I'm starting with shaders but I think the reason is that vTextureCoord is somehow off? I tried to use the mapCoords and unmapCoords from https://github.com/pixijs/pixi-filters/blob/master/src/pixelate/pixelate.frag similarly without success (I have no Idea what those do). Some time after I tried to use gl_fragCoord directly like this: vec2 coord = gl_FragCoord.xy / dimensions.xy; wich seems to do the trick but the texture comes out flippled. Im sure it can be fixed but I don't think this is a good path to follow. Right? Any hint would be much appreciated Thanks

Hi, so currently i'm working on personal game with RPG Maker MV and i'm trying to recreate vision limitation with shader, some thing like this This example is created with PIXI 5.2 and working with mouse position After this i'm went back to RPG Maker MV(Using Pixi 4.5.4) and use the shader code, alter it a bit and got it's kinda working with position (0,0) But when I change to position (0.5,0.5) - hopefully the light will go to center of the screen it got offset like this: This is what I come up with shader code for this effect precision mediump float; const float PI = 3.1415926535; varying vec2 vTextureCoord; uniform sampler2D uSampler; uniform vec2 iResolution; uniform float iTime; uniform vec2 pos; vec4 limitVision(vec2 st, vec2 pos, float radius){ float pct = 1. - smoothstep(0., radius ,distance(st,vec2(pos))); return vec4(pct); } vec4 norctunalVision(vec2 st, vec2 pos){ vec4 col = limitVision(st, pos, .2); vec4 tex = texture2D(uSampler,st); vec4 result = mix(col,tex,col.a); vec4 tex2 = texture2D(uSampler,st); //sampler texture again for out of vision effect tex2.rgb /= 5.; // Alter color result = mix(result,tex2,1. - col.a); //Mix them together return result; } void main(){ vec2 uv = vTextureCoord; vec4 col = norctunalVision(uv, pos); gl_FragColor = col; } Are there any difference between filter of PIXI(4.5.4) inside RMMV and standalone PIXI(5.2) or some kind of matrix calculation for them? EDIT: Just downgrade my standalone PIXI 5.2 down to 4.5.4 and have same issue, so this maybe a PIXI issues not by rpg maker mv -------- So what difference between the vTextureCoord or some matrix calculation between PIXI 4.5.4 and 5.2?

This isn't fully pixi related, but I'm looking to swap colors, limit color palette in images. I've had some success blindly painting color palettes and using Color Map Filter but I have no idea how it actually works. Can someone point me in the right direction? How would I go about making a color palette that for example limits image's colors to 32 given ones? https://pixijs.io/pixi-filters/docs/PIXI.filters.ColorMapFilter.html I was able to copy some shaders from shadertoy that also manipulate colors, but for my use case dynamically calculated/painted color map seems like the best solution.

Hello. I'm making example filter with custom fragment shader. This is what I have in terms of shader code so far: //fragShader struct SomeInfo { vec4 color; }; uniform SomeInfo c; void main() { gl_FragColor = c.color; } The idea is to (eventually) make c into an array of Infos, which would be then operated on by the shader. What I'm struggling with is the definition of filter: how do I declare the uniform to be of type SomeInfo in Js code? I assume in plain WebGL, I'd have to bind uniform location (of c's property) by calling gl.getUniformLocation(program, "c.color") and create a uniform with appropriate gl.uniform4f(location, /* bunch of values*/), but can I do something similar via the existing filters means? Relevant part of my Js code looks like this: //Define base filter class for our future shaders/filters PIXI.filters.CustomFilterBase = class CustomFilterBase extends PIXI.Filter { constructor({ vertexSrc = null, fragmentSrc = null, uniforms = {}, enabled = true, debug = false, name = null } = {}) { if(debug && fragmentSrc !== null) { fragmentSrc = "#define DEBUG \r\n" + fragmentSrc; } //Add dimensions for scaling uniforms.dimensions = { type: 'vec2', value: { x: 0.0, y: 0.0 } }; super(vertexSrc, fragmentSrc, uniforms); name ? this._name = name : this._name = "CustomFilterBase"; this.autoFit = false; this.enabled = enabled; } apply(filterManager, input, output) { this.uniforms.dimensions.x = input.sourceFrame.width; this.uniforms.dimensions.y = input.sourceFrame.height; // draw the filter... filterManager.applyFilter(this, input, output); } } //Shader for prototyping and testing PIXI.filters.TestFilter = class TestFilter extends PIXI.filters.CustomFilterBase { constructor() { let fragmentSrc = document.getElementById('fragShader').innerHTML; let uniforms = { //What do I do here?! c: { type: 'vec4', //Judging by GLSL_SINGLE_SETTERS, only GLSL's primitives are recognized value: new Float32Array([0.0, 1.0, 0.0, 1.0]) } }; super({ vertexSrc: null, fragmentSrc: fragmentSrc, uniforms: uniforms, name: 'testfilter' }); } } (using pixijs v4.8.7) The expected result is green screen, as it is if I declare c as vec4 in shader code, but alas the screen is black, hinting on c's value being default constructed / not properly assigned Any help is appreciated, cheers! P.S. I tried to find similar cases from this forum and stackoverflow, but it seems that few people use structs in GLSL code. P.P.S. If it is of any help, I found that PIXI.glCore.shader removes specific characters from uniform's name (which looks like a hotfix rather than a feature) and that in fact one of iterations uniformData's name is 'c.color'. /** * Extracts the uniforms * @class * @memberof PIXI.glCore.shader * @param gl {WebGLRenderingContext} The current WebGL rendering context * @param program {WebGLProgram} The shader program to get the uniforms from * @return uniforms {Object} */ var extractUniforms = function(gl, program) { var uniforms = {}; var totalUniforms = gl.getProgramParameter(program, gl.ACTIVE_UNIFORMS); for (var i = 0; i < totalUniforms; i++) { var uniformData = gl.getActiveUniform(program, i); var name = uniformData.name.replace(/\[.*?\]/, ""); //<----- Here it is!! var type = mapType(gl, uniformData.type ); uniforms[name] = { type:type, size:uniformData.size, location:gl.getUniformLocation(program, name), value:defaultValue(type, uniformData.size) }; } return uniforms; };

How can i recreate this soft gradient color and animate it?

Here's a helper function I made to create each shader plugin with just a simple function call like this: createShaderPlugin(name, vertShader, fragShader, uniformDefaults); Then you can create each sprite that you want to be drawn with your custom shader like this: var sprite = createShaderPluginSprite(name, size, uniforms); Update: I started a GitHub repo for it here if you want to check it out. I also made this little CodePen to demonstrate the usage with some comments. The encapsulated code is based on the plugin example and on the worldTransform/vertices calculations that I boosted from PIXI.Sprite. I've tried to optimize and condense for the use case where the Sprite doesn't have any Texture to be filtered.

Hi all, I was wondering if it was possible to access variables from a previous pass in the shader, i.e color of fragment or something along those lines. I want to have something that changes color over time after an event occurs. So if I can access a time delta plus a previous color then I can slowly modify it to a new state, is this possible? *Note this is my first time working with shaders, please excuse any stupid questions ? Thanks.

I've made a simple shader that uses cubemaps, it renders flawlessly in PC but it has AA problems in a highend mobile device. Any idea about what could be happening?

I'm using pixi.js ver 4.8.2. I want access not premultiply color from renderer's shader in pixi.js application. I set transparent is 'notMultiplied' , but I can olny access premultipilied rgb color... Is there way to access not multiplied color ? I put code and result here. // init with not multiply mode var app = new PIXI.Application(800, 600, { backgroundColor : 0xcccccc, transparent: 'notMultiplied' }); document.body.appendChild(app.view); // draw circle graphics with red and alpha 0.5 ( drawn at display left ) var graphic = new PIXI.Graphics(); graphic.alpha = 0.5; graphic.beginFill(0xff0000); graphic.drawCircle(100,100,100); graphic.endFill(); app.stage.addChild(graphic); // use graphics as a texture ( drawn at display right ) var mesh = new PIXI.mesh.Mesh( graphic.generateCanvasTexture() ); mesh.position.set(300,100); app.stage.addChild(mesh); // replace MeshRenderer shader for test premultiply effect app.renderer.plugins.mesh.shader = new PIXI.Shader( app.renderer.gl, // vertex shader is same as original MeshRender's one ` attribute vec2 aVertexPosition; attribute vec2 aTextureCoord; uniform mat3 projectionMatrix; uniform mat3 translationMatrix; uniform mat3 uTransform; varying vec2 vTextureCoord; void main(void) { gl_Position = vec4((projectionMatrix * translationMatrix * vec3(aVertexPosition, 1.0)).xy, 0.0, 1.0); vTextureCoord = (uTransform * vec3(aTextureCoord, 1.0)).xy; } `, // I changed change fragment shader for test ` varying vec2 vTextureCoord; uniform vec4 uColor; uniform sampler2D uSampler; void main(void) { //gl_FragColor = texture2D(uSampler, vTextureCoord) * uColor; <- remove gl_FragColor = vec4(texture2D(uSampler, vTextureCoord).rgb, 1.0); } ` ); // render graphics and mesh. app.render(); The execution result Ideal result is like this.