I'm just wondering if there is a way to get THREE.RepeatWrapping working with clearcoatNormalMap.
It works fine for the normalMap but appears not to tile when uses as a clearcoatNormalMap
Related
I'm trying to reproduce example of Szenia Zadvornykh presented here https://medium.com/#Zadvorsky/webgl-masking-composition-75b82dd4cdfd
His demo is based on three.js r80, so I referenced r101 and tried to remove most of unrelated parts, and just have scene with grid and png mask on top.
Here's my code: http://jsfiddle.net/mmalex/y2kt3Lrf/
Having commented // composer.addPass(maskPass) the grid shows up. But it does not seem like uniform sampler2D tDiffuse has the output of render pass.
I expect to see the grid helper and underlying HTML content under the canvas, where mask makes canvas transparent.
UPDATE, working now, thanks to #Mugen87: http://jsfiddle.net/mmalex/y2kt3Lrf/
There is a mismatch of files in your fiddle. If I use the latest version of three.js and the respective post processing classes, your code works fine:
http://jsfiddle.net/pk24zby7/
three.js has deprecated the renderTarget and forceClear parameter from WebGLrenderer.render() with R102. When the change was done, it was necessary to change many files in the examples directory in order to avoid warnings and even breakage. So using the latest post-processing classes with an older three.js version does not work.
Since the change is listed in the release note, I suggest you read the respective PRs for more details.
I'm currently working on a little game written in JS using Pixi.js(https://github.com/pixijs). One Problem has occured currently, I'm trying to implement pixel exact collision between shapes, while I was programing a little I noticed that all the pixel RBGA values of my images are just 0.
I searched on the web but for a while but the only reason for those Problems I could find was that the canvas was tainted because of CORS(Pixel RGB values are all zero).
But this can't be the reason in my case because I created the sprites myself, I'm not loading them from other (any) domains or something like that.
Could this be a problem with the images? How do I avoid that? I will append some code that works if I use other images (some images I downloaded for tests).
const app = new PIXI.Application({width: 500, height: 500});
document.body.appendChild(app.view);
PIXI.loader.add("sprites/test.png")
.load(() => {
let img = new PIXI.Sprite(PIXI.loader.resources["sprites/test.png"].texture);
app.stage.addChild(img);
console.log(app.renderer.extract.pixels(img));
});
Edit: I tried getting the RGBA values using a short Java Program btw, same problem. Every single value is zero.
I have two computers
Windows XP 32 + chrome last version
Windows 7 home Premium 64 bits + chrome last version
The meshlambertmaterial example is not showing at PC 2?
I have discover that there is some problem related with the lights or the emissive color ( initially black, and screen black = nothing is viewed.) I can see the 3D object if I choose other color but the result is poor because the light is not taken into acount. The behaviour is like meshbasicmaterial.
The phong material, depht and others works as expected.
I promise I'm using the web example http://threejs.org/docs/#Reference/Materials/MeshLambertMaterial
Same problem with Firefox last v.
Any idea what is happening? It is related with my graphic card? Windows 7
Other materials (phong) are viewed OK.
Any tool to check what is happening?
UPDATED
The problem could be related with three.js release.
This example uses three.js r60 :
http://www.lostmarble.com/misc/experiments/learning-threejs-master/chapter-04/06-mesh-lambert-material.html
This example works fine on my 'problematic' second computer.
However, if I change the src to three.js r71, the box is black ?
The example uses ambient white color but this parameter does not exist in r71
Any idea Westlangley? (I know that this is strange but .... is a real problem)
I can see that the second example is opened by file. If opened from the link you posted that holds the example is the same problem taking place?
Also the background of the file is black so the setClearColor attribute of the renderer might be set wrong. The black box can be related with the light.Can you post some code?
I would advise you always to use the latest revision of three js if possible.
I am using three.js to do some online interactive modelling of geology, and have been creating image URI using the Canvas Element (output would be: data:image/png;base64,).
The image creation works fine in Chrome,Firefox, and Safari, but using the images in three.js as a texture doesn't show up in Firefox.
The simplest demonstration I can show is by changing one line of a three.js example, to substitue an image URL for a dataURI, and use that as a texture.
http://visiblegeology.com/renderingProblem/
This works fine for me in Chrome and Safari, but just doesn't show up in Firefox.
I was wondering if anyone had any advice, work-arounds, or thoughts.
Thanks for any help,
Rowan
I've checked using a regular img tag. It works that way in Firefox. So the problem would seem to be the combination of three.js and the data uri.
This example by mrdoob doesn't work in Firefox either: http://mrdoob.github.com/three.js/examples/webgl_particles_shapes.html
A few suggestions:
check if you are using the latest three code.
try removing the final equals sign of the data uri. It is used for padding and may not be necessary.
try disabling your add ons one by one, as they may interfere as well
I have a flex app I am scaling using systemManager.stage.scaleMode=StageScaleMode.NO_BORDER; for the most part it works well except for my bitmap data (mostly png's from the designers).
I can set the mx:image tags to smoothBitmapContent=true and that works great for everything except my mouseover objects. When I do a mouseover, the source is being changed from one embedded image to another embedded image. I have tried several (many) online "smoothimage" classes, and tried to write my own, I have tried to reset smoothBitmapContent every chance I get but still no dice. It seems to mee that because I am scaling at the app level, that the flopped out bitmap is not getting smoothed when it renders.
How to keep things smooth? Perhaps there is a flag to tell Flex to smooth stuff when it scales it?
So the easy answer (that works for me) was to instead of changing the image.source from one embedded png to another, was to use two images and flip flop image.visible between the two... Granted that adds two extra objects to the screen, But for some reason they all stay smoothed and scaled that way, where as before switching sources was going from smooth to jaggidy and un-readable.
Josh