Importing threejs shader example to OF

[cyrstem]

hi i try to translate a threejs shader implementation to a OF im managed to make it work mostly but i have a small issue i can’t see why it is
this is the example

from here

this is what i have managed to accomplish so far

colors
the code for this is here
any idea what am i missing ??

[hubris]

Hi @cyrstem!

By the looks of your screen capture, it looks like it’s related to size/scale. The ThreeJS example sets a 1 unit radius sphere. You are setting a 100 unit radius one in OF.

Either you scale everything down or, better yet to avoid working with small numbers, pass a float uniform into your vertex shader and multiply the displacement by that uniform. Since you are working with sin/cos and noise, and probably with intervals between -1 and 1, start with a number like 100 and see what that gets you.

Have fun!

[cyrstem]

heyy thanks thats was it i complete missed that
thanks!

[moebiussurfing]

hey @cyrstem, do you have the missing ofApp.h file on the gist link? I would like to test this as a guide to get shaders from other three.js sources. Thanks for sharing.

[cyrstem]

yup sure here you go

#pragma once

#include "ofMain.h"
#include "ofxAutoReloadedShader.h"
#include "ofxImGui.h"
class ofApp : public ofBaseApp{

	public:
		void setup();
		void update();
		void draw();
		void exit();
		void keyPressed(int key);
		ofxAutoReloadedShader shader;
		
		ofMesh mesh;
		ofIcoSpherePrimitive ico;
		ofCamera cam;
		//ofEasyCam cam;

		ofImage imgSave;
		ofLight ambient, point;


	private:	
	bool imGui();
	ofxImGui::Gui gui;
	bool mouseOverGui;
	bool guiVisible;
	//save data
		string XML_path ="settings.xml";
		void XML_load_app(ofParameterGroup &g, string path);
		void XML_save_app(ofParameterGroup &g, string path);
	//end save data

	ofParameterGroup init{"Setup"};

	ofParameter<float>speed{"speed",0.1,0.001,1};
	ofParameter<float>zoom{"zoom",7.6,-10.0,100};

	ofParameterGroup perlin{"Perlin"};
	ofParameter<float>decay{"decay",0.35,0,1.0};
	ofParameter<float>waves{"waves",2,0,100};

	ofParameterGroup color{"Color"};
	ofParameter<float>eqcolor{"eqColor",3.0,0.0,50.0};
	ofParameter<float>red{"Red",0.4,0.0,1.0};
	ofParameter<float>green{"Green",0.4,0.0,1.0};
	ofParameter<float>blue{"Blue",0.4,0.0,1.0};
};

[cyrstem]

@moebiussurfing @hubris i was re-visiting this and i notice that the OF version has some issues with
anti-aliasing in my machine do you know how to fix this ?

[moebiussurfing]

sorry @cyrstem ,
I don’t know.

but last week I had a similar (with non-working anti-alias) problem with this addon:

danbz/ofxDOF

I added numSamples 8-16, stencil, GL_RGB / float and tweaked some variables of the FBO without success:

  ofFbo::Settings dofBuffersSettings;
  dofBuffersSettings.width = width;
  dofBuffersSettings.height = height;
  dofBuffersSettings.internalformat = GL_RGB;
  dofBuffersSettings.numSamples = 0;
  dofBuffersSettings.useDepth = true;
  dofBuffersSettings.useStencil = true;
  dofBuffersSettings.depthStencilAsTexture = true;
  dofBuffersSettings.textureTarget = ofGetUsingArbTex() ? GL_TEXTURE_RECTANGLE_ARB : 
  GL_TEXTURE_2D;