WebGL

问题 So to implement a tilemap using Threejs and Brandon Jone's tilemap method (found here) I am using a THREE.Plane geometry for each layer, and painting the face with the following custom shaders: Vertex Shader: var tilemapVS = [ "varying vec2 pixelCoord;", "varying vec2 texCoord;", "uniform vec2 mapSize;", "uniform vec2 inverseTileTextureSize;", "uniform float inverseTileSize;", "void main(void) {", " pixelCoord = (uv * mapSize);", " texCoord = pixelCoord * inverseTileTextureSize *

问题 I'm trying to achieve making a gradient color as the design apps (Photoshop for example) does, but can't get the exact result i want. My shader creates very nice 'gradients' but also contains other colors that are different from the colors I want to switch in. It looks nice but, my aim is adding blending functions later and make a kind of color correction shader. but first of all I have to get the right colors. Here is my fragment shader http://player.thebookofshaders.com/?log=171119111216

问题 I am using https://github.com/auduno/clmtrackr I am trying to get the image to be saved from the following example: https://github.com/auduno/clmtrackr/blob/dev/examples/facedeform.html The issue is that I have obviously tried "canvas.dataToURL()". I can get the video of the webcam as an image; however, the overlay image is always transparent. I attempted using the texture to draw on a canvas, but that also didn't work.... I have an example here: https://codepen.io/msj121/pen/RgXjYK I want to

问题 I know I could use gl_Position to get every vertex's position, but if it's possible to get every pixel's position in fragment shader ? I want to change the alpha value of some pixel area. 回答1: vec2 gl_FragCoord It will return you position of the fragment on the screen in pixels. If you pass uniform vec2 screenResolution then you could play with that two values to determine where exactly on the screen is pixel, in which part and such. This is a built-in variable, so you can use it whenever you

问题 So in the javascript portion of my code, here is the snippet that actually sends an array of pixels to the vertex and fragment shaders- but I am only working with 1 texture when I get to those shaders- is there anyway that I can send two textures at a time? if so, how would I 'catch' both of them on the GLSL side of the codee? if (it > 0){ gl.activeTexture(gl.TEXTURE1); gl.bindTexture(gl.TEXTURE_2D, texture); gl.activeTexture(gl.TEXTURE0); gl.bindFramebuffer(gl.FRAMEBUFFER, FBO2);} else{ gl

问题 I am very new to WebGL, but not Javascript or Canvas. Essentially, I need a very fast way to be able to change the color of a pixel on a canvas at any coordinate. I feel like this could be done using WebGL fragment shaders. Is this possible, and is there a better way? How would I go about doing this? 回答1: This isn't an exhaustive guide to rendering because it doesn't include the bits about shader management; instead it focuses on how drawing of WebGL primitives is actually performed, and how

问题 How can I enable an extension on a Three.js shader? My code so far: getting extension: var domElement = document.createElement( 'canvas' ); var gl = domElement.getContext('webgl') || domElement.getContext('experimental-webgl'); gl.getExtension('OES_standard_derivatives'); on my shader: fragmentShader: [ "#extension GL_OES_standard_derivatives : enable", "code..." ]... The console output: WARNING: 0:26: extension 'GL_OES_standard_derivatives' is not supported ERROR: 0:32: 'dFdx' : no matching

问题 I am using three.js to call a fragment shader - that shader specifies a color for my material, broken out into rgb - and I want to see if I can multiply those colors by a random value. This is the code I'm using so far: gl_FragColor = vec4( color.r*.5, color.g, color.b, smoothstep( 8000.0, -8000.0, gl_FragCoord.z / gl_FragCoord.w ) ); //MH - creates colors by multiplying color values and this is what I'd want to do if it were javascript, though obviously this doesn't work inside a GLSL shader

问题 I need to render a lot of small objects (2 - 100 triangles in size) which lies in deep hierarchy and each object has its own matrix. In order to render them I precalculate actual matrix for each object, put objects in a single list and I have two calls to draw each object: set matrix uniform and gl.drawElements(). Obviously it is not the fastest way to go. Then I have a few thousand objects performance becomes unacceptable. The only solution I'm thinking about is batch multiple objects into

问题 Question updated with new code I am trying to write a WebGL shader that will draw a TMX Layer (exported from the Tiled editor). I am using THREE.js to create a Plane mesh and have the material be a ShaderMaterial that will draw the map on it. For those who don't know a tilemap exported by the Tiled editor as json will give a data attribute for each layer; it contains an array of numerical values, each of which is the tile index in the tileset like: "data": [5438, 5436, 5437, 5438, 5436, 5437,