WebGL

问题 I read that that in Gouraud Shading, the color for the fragment is computed in the Vertex Shader. Whereas, in Phong Shading, the color for the fragment is computed in the Fragment Shader. In this implementation , which of these are we using ? I did not understand exactly the difference between them. Could anyone help me ? Thanks <button id = "ButtonX">Rotate X</button> <button id = "ButtonY">Rotate Y</button> <button id = "ButtonZ">Rotate Z</button> <button id = "ButtonT">Toggle Rotation<

问题 I tried running a GPU intensive WebGL shader and couldnt get my GPU to peak over ~30% usage in task manager, even when visiting pages that benchmark wild WebGL simulations like this one which renders 30,000 fish in a complex environment. Perhaps this is a WebGL security feature? Is there any way programatically, even if it involves disabling security settings in the browser (any browser), to force WebGL to utilize 100% of the GPU? 回答1: What did you try? It's trival to use 100% of your GPUs

问题 I am trying to implement a Streak shader, which is described here: http://www.chrisoat.com/papers/Oat-SteerableStreakFilter.pdf Short explanation: Samples a point with a 1d kernel in a given direction. The kernel size grows exponentially in each step. Color values are weighted based on distance to sampled point and summed. The result is a smooth tail/smear/light streak effect on that direction. Here is the frag shader: precision highp float; uniform sampler2D u_texture; varying vec2 v

问题 i want experiment with ShaderMaterial material from Three.js. But i don't know OpenGl Shading language.When i use fragment shader code in above site,i get a bunch or errors.So i dont know vertex and fragment shader depend with each other or no matter.If is right what i should write in vertex shader.Thank My copy-pasted vertex shader for BoxGeometry uniform float time; varying vec2 vUv; varying vec2 surfacePosition; uniform vec2 resolution; void main() { vec3 posChanged = position; posChanged

问题 I need to heavily downsample a image to prepare for a perceptual hashing algorithm, for example from a 3024x4032 to a 9x9 image, and I'd like to use webgl for that (as the base image is already processed within the webgl pipeline), and artefacts quickly appear when the downsampling rate is too large. Taking this sample situation: // WebGL2 - 2D Image // from https://webgl2fundamentals.org/webgl/webgl-2d-image.html "use strict"; var downscaleFactor = 0.5; var vertexShaderSource = `#version 300

问题 I want to get a snapshot of my webgl canvas and I want a high resolution capture so I increased my canvas size. This automatically changes gl.draingBufferWidth and gl.draingBufferWidth . I then set viewport and then render the scene. My code works correctly in low resolution (under 4000*4000) but in higher resolutions there are many problems. If the resolution is a bit higher the snapshot not does not completely show. See attached file. If the resolution increases more nothing is shown. And

问题 The following R code generates an HTML file and opens it in the browser: library(rgl) M <- rbind( c(0,0,0), c(-1,4,0), c(4,9,0), c(6,3,0) ) quads3d(M,col='red') browseURL(paste("file://", writeWebGL(dir=file.path(tempdir(), "webGL"), width=500), sep="")) The rendering is an interactive planar polyhedron in the 3D space. With the latest version of the rgl package ( 0.93.935 ), the HTML rendering does not work for Windows users (as well as iOS users, I think) with default configuration browser.

问题 Here is a very lightly reworked introductory example from webglfundamentals.com. http://codepen.io/anon/pen/mVYrZd Mousedown on the canvas to draw a new rectangle. The previously drawn rectangles are cleared. Why? The for loop and the event handler are calling the exact same function. Relevant code: // Draw 50 random rectangles in random colors. // They draw on top of each other, as expected. for ( var i = 0; i < 50; i += 1 ) { drawARandomRectangle( gl ); } // Draw one rectangle on the canvas

问题 Using the three.js library I managed to show occluded edges of a 3D object as dashed lines. And I want edges occluded by other objects to behave the same way. With the solution explained here it's working fine except in some strange cases. Here's an illustration of such a case (I use an orthographic camera so we don't see how far away objects are from each other, hence the text in the picture): Has anyone ever encountered something similar? Any idea why in this case it's not working? Maybe

问题 I have a web application where I need to show a 3D model using webGl in the background then showing different stuff on top of it. All is working VERY fine in firefox except in chrome where I need to give the canvas a negative value for the z-index rule in CSS. So I would say I need one of two things: If I fix this issue giving a negative z-index to the canvas, will this cause any harm on to my application in any of the browsers (in both desktop and mobile) Could anybody guess why its not