Questions tagged [webgl]

1

votes
1

answer
53

Views

html2canvas captures everything except the content of an inner canvas

I've got a map rendered by means of leaflet. I need to make a screenshot of that map by using html2canvas. To make use of html2canvas, I need to provide a DOM element to capture (elementToCapture) and an optional configuration (html2canvasConfiguration). var html2canvasConfiguration = { useCORS: t...
Andrew Tobilko
1

votes
2

answer
31

Views

Encode axis aligned unit vector in a single float value

I want to encode axis-aligned unit vector in a single float value. Like this: 0: vec3(0, 0 ,0) 1: vec3(1, 0, 0) 2: vec3(0, 1, 0) 3: vec3(0, 0, 1) To convert float to vector according to the table I can write a simple code in float axisIndex ... vec3 axis = vec3(0.0, 0.0, 0.0); if (axisIndex > 0.5) {...
Rem
0

votes
0

answer
5

Views

How to select WebGL GLSL sampler type from texture format properties?

WebGL's GLSL has sampler2D, isampler2D, and usampler2D for reading float, int, and unsigned int from textures inside a shader. When creating a texture in WebGL1/2 we specify a texture InternalFormat, Format, and Type. According to the OpenGL Sampler Wiki Page, using a sampler with incompatible typ...
lilinjn
1

votes
2

answer
59

Views

What's minimum required code to MODIFY a WebGL shader at runtime?

Suppose I have created a WebGL program, attached some initial shaders, linked the program, validated and after some time I want to modify source of one of the attached shaders. Should I create a new WebGL program with the gl.createProgram(), or I can just reuse it and attach shaders? I'm a bit conf...
HankMoody
6

votes
1

answer
83

Views

glslify how to share a struct between modules

I am using https://github.com/glslify/glslify to share code between glsl shaders. I have a vert shader that is trying to include a module at the top the vert has: #pragma glslify: JointAndPalette = require('./JointAndPalette.glsl'); #pragma glslify: decodeJointAndPalette = require('./decodeJointAndP...
kevzettler
1

votes
0

answer
616

Views

Unity3D WebGL doesn´t show the game

I have tried several forums without any results. I am pretty desperate, so I made a game and built it in WebGL, then I tried to run it locally (on both firefox and chrome) and also put it on a website specially developed for unity web gl games and in both cases it showed only loading with Unity logo...
Samuel V.
1

votes
1

answer
410

Views

rotate Z axis on 2d image's matrix in shader

I'm trying to rotate a 2d image's matrix inside the vertex shader. I want the 2d image to rotate around what I think would be the z axis. However The closes I've ever gotten is: Here is my matrix inside my shader that I apply translation and scaling on: mat4 worldPosTrans = mat4(vec4(scale.x * cos(...
Elias
1

votes
0

answer
41

Views

threejs: Does anyone know what happened to phong/standard shading support on recent (Nougat) smartphone releases of Android?

i.e., MeshPhongMaterial, MeshStandardMaterial. These materials now render as black. Examples: https://threejs.org/examples/#webgl_animation_skinning_blending https://threejs.org/examples/#webgl_geometry_teapot In the last example, only 'Wireframe' and 'Smooth' of the Shading menu work on many rec...
Chris R
1

votes
0

answer
38

Views

How generate planes parallel to the camera view plane?

I am trying to do texture-based volume reneding with a 3D texture. I just mapped this texture to a stack of planes but I need to have these planes parallel to the camera to avoid bad visualization when the camera is moved. Basically I want to make a viewport-aligned slices. I have been trying but I...
Dexylon
1

votes
1

answer
161

Views

Openlayers accessing low-level WebGL shaders

Is it possible to access low-level WebGL from openlayers in the same way simple canvas html5 element can be accessed? var context = event.glContext; var gl = context.getGL(); I've tried to adapt the low-level clipping example in openlayers to draw a simple triangle such as the one in WebGL Fundament...
João
1

votes
0

answer
158

Views

WebGL trouble using an index buffer to draw a sphere mesh using an offset

I am trying to draw a sphere mesh that I can later modify to look like the leaves of a tree. However, there are also vertices in my pointsArray that precede those generated from my sphere mesh. I have an index buffer containing the indices for drawing each triangle in order, but I need to access the...
M. Rosenlof
1

votes
0

answer
210

Views

unity webgl audio in mobile

I have Unity WebGL games on Amazon S3 and I want to embed them in an iframe so they are in my angular web app. The problem I have is that when using them in mobi le, they do not reproduce sound. The warning that goes out says: An AudioContext in a cross origin iframe must be created or resumed from...
1

votes
0

answer
55

Views

Why texture lines on meshes get choppy when exceeding a distance from the point of view?

Example of lines getting choppy with distance. I've been trying to render cubes with their edges colored by playing around with the uv coordinates (no texture image). The end result looks choppy when somewhat far, I've seen enough webgl demos to know this can be avoided but can't figure out how. I t...
Alejo Rodriguez
1

votes
0

answer
271

Views

WebGL render to texture with framebuffer

I am new in webgl and trying to learn it. I am trying to learn framebuffer and rendering to texture but I am stuck. What I am trying to do is to copy the colors (pixel data) of a texture to another texture by using framebuffer. I have some other things in mind like doing some calculations before ren...
Arka Roy
1

votes
0

answer
232

Views

Geometry shader equivalent in WebGL

I am working with light propagation volumes and I have stumbled upon a problem with WebGL where I need a geometry shader or something to emulate it. I am working with 3D textures and I need to be able to render to a 3D texture. I found this in guide for DirectX 11: Because of the way DirectX11 handl...
Marcus
1

votes
0

answer
54

Views

Reflections in pixel shader

I am having trouble in my pixel shader's reflections https://www.shadertoy.com/view/lsycD1, I cant get them to work, currently they are inside my main's render loop and are almost displaying what I want but not really, I have tried using reflect( rayDirection, position ) or reflect( rayDirection, no...
Felipe Gutierrez
0

votes
0

answer
5

Views

ThreeJS issue with resizing images when they are actually as a power of 2

I've got a strange issue regarding the automatic resizing of textures by WebGLRenderer using threejs. I know that WebGL requires the sizes of textures* to be the power of 2. *-the textures that are using non-LinearFilter, or have wrapping not as a clamp set My texture has wrap set as RepeatWrapping...
Maciej Wójcik
1

votes
1

answer
262

Views

Moving transformation matrices from shaders to the Javascript application

I had to solve many tasks of an homework. I have to build a rotating cube with some buttons to apply changes and transformations. There is one task that asks to me 'move the transformation matrices from the shaders to the js application' . I know how to build rotating , translating and scaling matri...
1

votes
1

answer
402

Views

glDrawElements: attempt to access out of range vertices in attribute 1

Note: the general question has been asked before, but this sort of error seems to really depend on specifics. Apologies if this is indeed a duplicate I am getting the 'out of range' error for the attribute a_Morph_0, despite checking numerous things: The attribute exists in the shader I am using VAO...
davidkomer
1

votes
1

answer
75

Views

WebGL Fillstyle

I currently have a canvas to which I am rendering a ThreeJS scene. Everything is working fine, however, I would like to display a transparent fill over it. With a normal canvas, I would simply do canvas = document.getElementById('canvas'); context = canvas.getContext('2d'); This, of course, doesn't...
Eight
1

votes
0

answer
38

Views

How to set export printer add second page using javascript?

My screen split into crated two canvas Top and bottom .one is 2D and another 3D. now I attempted export printer. I get my image data (twoDData and threeDDate) both in add single page but I should need export printer 1st-page 2D image data, 2nd-page 3D image data set. How to do this? this.exportPrint...
karthickks
1

votes
0

answer
151

Views

WebGL - decrease texture intensity

I'm using WebGL to create a '3d dog model' , in order to do this I have only to use cubes to build the dog. One of the tasks asks me to apply a texture (that should be a simple checkerboard pattern) that decrease of intensity from the head to the tail of the dog. This is a view of the dog without th...
1

votes
1

answer
253

Views

Post Effects and Transparent background in three.js

Trying to use the transparent background with some post effect like the Unreal Bloom, SMAA and Tonemapping provided in the examples but it seems to break the transparency from my render. renderer = new THREE.WebGLRenderer({ canvas, alpha: true }); renderer.setClearColor(0xFF0000, 0); composer = new...
MaT
1

votes
0

answer
64

Views

overcoming cross-origin restrictions for glfx.js/webgl

I am trying to build a web application for real time image-processing. Specifically I need to be able to upload an image, perform contrast adjustments, gray scaling, edge detection and a connected component analysis on the image. So far the only library I have found to at least support parts of thi...
oscardo
1

votes
0

answer
54

Views

Change Color of WebGL Earth Globe?

I'm creating a website with an open-source globe found on the WebGL Earth site. The JavaScript code for this globe can be found here: http://www.webglearth.com/v2/api.js I want to alter the colors shown on the globe: the blue water, the tan land, and the purplish text/borders. Although I tried to si...
AmalTyagi
0

votes
0

answer
7

Views

How to apply tint on Canvas element(Context - webgl)

I want to apply tint on my image which is loaded into canvas using library glfx.js which makes use of webgl. In the code below I'm making changes to warmth brightness in fragment shader of webgl. Now for tint i need to change the rgba in fragment shader. How exactly I'm supposed to do that!! Below i...
Adarsh
1

votes
2

answer
266

Views

draw a ellipse curve in fragment shader

I want an smooth curve in webgl so I tried to draw a rectangle in vertex shader and send positions to fragment shader in normalize size and Size parameter which is the real size of square in vec2 Position; in vec2 Size; out vec2 vPosition; out vec2 vSize; void main() { vSize = Size; vPosition = P...
MHA15
1

votes
0

answer
240

Views

glDrawArrays: attempt to access out of range vertices in attribute

I'am trying to draw 2 triangles with gl.drawArrays + gl.TRIANGLES but it just won't work (BTW I am using cocos2d-js). Here is what I have done. First code for add vertex. addVertex:function(x, y) { this._vertexCount += 1; this._vertexArray.push(cc.p(x, y)); this.updateVertexArray(); } updateVertexAr...
supersuraccoon
1

votes
1

answer
74

Views

Three.js slow on phone's vertical screen

I have this codepen that I made into a website. My problem is that it performs really slowly on the Chrome browser on my Nexus 5X phone, but when I rotate the screen to horizontal view or when I view the CodePen it runs smoothly again. I've tried reversing the width and height to see if it was a scr...
Anna
1

votes
0

answer
90

Views

Error: GL ERROR :GL_INVALID_OPERATION : glTexImage2D

We are developing a kind of 3D graph. We are using Angular with Three-full NPM (https://github.com/Itee/three-full). We are implementing the Nodes as particles and we are drawing them with shaders. Code bellow of the post* That works pretty good in the web browser (Mozilla and Chromium) with Linux...
D. Martínez
1

votes
1

answer
54

Views

My textures are bleeding into one another when rendering from a texture atlas

I am using an texture map, by which I mean a composite of several texture images. See here: When I use part of this image map as a texture, however, I get some 'bleed' from the parts immediately to either side of it. See here: You can (just!) see that the red and yellow images on either side are app...
James Smith
1

votes
2

answer
70

Views

WebGL website looks fine on PC, but looks weird on mobile devices

So I made a WebGL website and it can be accessed here: https://jameswebsite.azurewebsites.net/ It looks fine(or as expected) on the PC, but on mobile devices it looks funny. Looks like the texture mapping might be off (maybe texture clipping is the problem) but also there doesn't appear to be any sh...
James Carter
1

votes
0

answer
121

Views

URI prefix is not recognized when using WebClient with Unity WebGL

These code below will generate error 'The URI prefix is not recognized', I already check the url,it's correct url format,it's my server url about upload function. string url = 'http://[skip]'; WebClient wc = new WebClient(); byte[] result = wc.UploadData(url,'PUT', data); Error result in Chrom...
敬錞 潘
1

votes
0

answer
63

Views

three.js iOS lights limit?

is there a limit on how many lights you can include in a three.js scene on iOS? the code below works on Linux, Mac and Windows... but does not work on iOS (tested on firefox focus and safari). if i lower the amount of lights from 15 to 14 it works fine, but when i pass 15 it doesn't work on iOS anym...
Nick
1

votes
0

answer
44

Views

Webgl rendering slows down on 30Hz monitor in presence of a css animation

I have an electron app which contains a canvas. I read 1280x720p video frames from the array and use webgl to display it sequentially on the canvas. Everything works fine on a 60Hz display. When I move the app to external display running at 30Hz (refresh rate of 30), things slow down considerably. I...
parvez
1

votes
0

answer
66

Views

How do you get WebGL to support gpu resident code?

My goal is to implement a language interpreter to stay resident in the gpgpu to which I will send data and language snippets, and have all operations performed without communicating with the cpu. I will need to know the gpu-side index of the client code so each instance can use its identity to make...
jlettvin
1

votes
1

answer
51

Views

To create an output texture do I need a call to texImage2D?

In Webgl, I currently make the following calls to create a texture whether it is used for input or for output. Do I really need the call to texImage2D knowing that my shader will be overwriting the values in the texture? const texture = gl.createTexture(); // Bind the texture so the following method...
Jeff Saremi
1

votes
0

answer
195

Views

Chrome: Get detailed information on GPU activity

I'm studying a WebGL scene with Chrome's performance tab, and am trying to get more information on what might be causing the GPU to totally block all other activity on the page for multiple seconds upon the first render call: I haven't found a way to get deeper insight into GPU activity from the Chr...
duhaime
1

votes
0

answer
62

Views

WebGL “draw a square” program, need help debugging it

I am following the LearningWebGL tutorials, I am not able to reproduce the first code itself. Here is the buggy code : var modelView = mat4.create() var projection = mat4.create() var vertexPositionPointer, modelViewMatrixPointer, projectionMatrixPointer var vertexBuffer var vertices = [ 0.5,...
JDoe
1

votes
0

answer
51

Views

What happens in the GPU between the call to gl.drawArrays() to g.readPixels?

Changing the Title in the hopes of being more accurate. We have some code which runs several programs in succession by calling drawArrays() . The output textures from each stage are fed into the next and so on. After the final call to draw, a call to readPixels() is made. This call takes an enormou...
Jeff Saremi

View additional questions